How to Describe Images for Accessibility and Findability

The University’s template for external websites gives great flexibility in the use of images. From visual grid layouts to mastheads and galleries.

Many users of our websites don’t see these images. They may have chosen not to download images, or might be using a screen reader to turn visual information into audio. This means it’s important to provide contextual information about our images.

Alternative text, or alt-text, is used to describe images to screen readers used by visually impaired people. It is also a useful aid for search engine optimisation, as search bots can crawl this field to get information about the image.

Good practice for alt-text

In T4 when you add an image to the media library, whatever you put in the description field is output as alt-text.

To make your alt-text effective, keep it short and descriptive. For all our web content, we recommend you write naturally and clearly – alt-text is no exception.

Long alt attributes will disrupt the flow of the content on your page. If you have a lot to say about the image, eg for a chart or graph, add a caption or describe it in the text on the page. Don’t cram this into the alt-text.

It’s good to think about including key words in your alt-text to aid findability, but they must be relevant to the image. Don’t fill your alt text with a string of random keywords just to help search optimisation. This will be confusing for users of screen readers. As we recommend for all content – write for people, not search engines.

We recommend that you avoid using text in an image as it can’t be seen by screen readers or search bots. Therefore it’s not accessible or findable. But, if you do have text in an image, make sure you also include that text in the alt attribute.


Alt text is not needed for:

  • purely decorative images, eg the masthead images on the NICA website
  • where there is also link text, eg top task boxes on homepages

However, there still needs to be an alt tag in the code of the page. If the alt tag is missing, a screen reader will try to add context by reading the image name, and this is often unhelpful.

An empty alt tag indicates to the screen reader that the image is meaningless. This means it’s simply ignored by the screen reader. The good news is that in T4 if the description field is left empty then the alt text field is left empty and still appears in the code.

Find out more

This video, created by Mike West, gives a great overview of what I’ve covered in this blog post. It includes examples of exactly what a screen reader picks up from images with and without alt-text.

Share this post:

Designing the New University Homepage

As part of phase one of Go Mobile we redesigned the University homepage so that it works across all devices. Like the other sites going through Go Mobile it is managed in T4, the University’s content management system.

Features of the homepage

Our new homepage can be broken down into eight distinct sections.

  1. Global menu for quick access to key links
  2. Course finder for direct access to Undergraduate and Postgraduate courses
  3. Hero image slider to highlight key news, event and research stories
  4. Video content to support our key messages
  5. Seasonal message top task boxes
  6. Latest news from the Press Office
  7. Partner logos and awards carousel
  8. Social media links and directory
Newcastle University homepage features and layout

Homepage design features and desktop layout

On mobile devices these stack horizontally, one on top of the other.

We’ll look at a couple of these features in more detail.

Hero image slider

The old homepage image slider was full width. Although this created a strong visual impact, sourcing images to fit this area could be problematic.

Old full-width hero image slider

Old full-width hero image slider

The new hero image slider is smaller. It allows the Press team to source images that would fit a standard landscape 4 x 6 photo.

New hero image sliderOn mobile devices the caption drops below the image to avoid the image from being fully covered. The caption and image form a single clickable link. This is important on mobile devices as it creates a large hit target to increase successful touch interactions.

Video content

The new homepage layout has allowed the use of rich media content such as video. The analytics show that the external homepage is the most popular destination for video consumption. This has helped increase the profile of some key videos during the months of October to December 2015:

  • The Impact of a World-Class Civic University
  • How Smoking In Cars Can Affect Children
  • Dr Martin Luther King Jr Honorary Degree Ceremony
  • Our City
  • Our Campus

Related posts

Read more about the new responsive website template in our case studies:

Share this post:

Introducing Our New Website Media Management Training

In our team update from 1-14 October you will have seen a mention of a new module we’ve added to our Go Mobile training: Website Media Management. We developed this in response to requests from the first cohort of Go Mobile editors for more help managing images.

Our training on planning and writing web content, and using the T4 content management system, cover some of the ways images can be used in the new template. The new media training takes things a step further. It covers:

  • when to use images
  • sourcing images
  • selecting images
  • preparing images for publication
  • best practice for documents
  • uploading assets to T4’s Media Library

Sourcing and selecting images for your website

The primary source for images for your website should be the University photo library. In the library you can:

  • browse or search for photos
  • save relevant images to your lightbox so you can easily find them again
  • download the approved University logos
  • access student profiles

In the training we cover some tips for getting the most out of the photo library. These include using multiple lightboxes, browsing by keyword and viewing all photos from a selected photographer.

When it comes to selecting images, we provide guidance on how to select images for the four core themes identified in the University branding guidelines; student experience, sense of place, teaching and learning, and research.

The most important thing for image selection is to choose photos that are natural or appear to be observed, rather than staged. That means nobody looking directly into the camera!

Editing images for use on the web

We recommend that our editors use the free, online photo editing tool, Fotor. Its clean user interface makes it easy to upload, crop and resize images to the required dimensions.

Even if you have access to Photoshop, if you’re not a regular and proficient user it can be overwhelming. Fotor is a straightforward alternative.

I wrote a post earlier in the year that includes advice on editing images for use on your website.

Feedback from attendees

There have been three sessions so far, with more to follow in December. The feedback has been very positive:

‘Great information on the use of appropriate images in terms of context on the web page’


‘Really useful advice on when to use images and how to select the most appropriate ones’


‘Good to get practical, hands-on opportunity to edit and save images’


Further information

For Go Mobile editors, you’ll find lots of guidance on using images on our demo site.

Not yet part of the Go Mobile programme and want to improve the imagery on your website? Get further information from the image guide on our website (University login required). This includes a step-by-step guide for using Fotor.

And I’m always happy to take questions in the comments.

Share this post:

Do Your Users Interact with Dynamic Content?

Every now and again I go off on a little rant. My team’s used to it. They humour me. And thankfully, mostly, nod and agree. Or at least see my point of view. When they gave me the power to write posts here, I wonder if they thought my rants would spill over for all the world to read.

Today you’re party to a rant about carousels, image sliders and rotating banners. Call them what you will, they’re all the same – dynamic content. Dynamic content is frustrating, because content is hidden as the thing moves.

Dynamic content is largely ignored by people who come to your website to complete a task. That’s what people use websites for, you know, to find answers to their questions.

Why I don’t think you need a carousel

I have some stats to back up the theory that dynamic content is not as effective as static content.

Stats? Hmmm, maybe this is the point when a rant stops being a rant and becomes a reasoned argument.

From 3 to 17 August on the University homepage we had numerous messages relating to Clearing. Some were in the rotating banner. Some were in the static content of the page. We have tracking set up on all the links in both of these locations.

Over the two week period:

  • the banner messages were clicked 2849 times
  • the static content links were clicked 9635 times

The analytics show that our users are 3.4 times more likely to click the links in static content than they are to click links in the banner.

Why might this be the case?

There’s a lot of research from the higher education sector that confirms that carousel interactions reduce as you move through the features. So the item in position one gets most clicks and the number reduces as the banner rotates.

User research conducted by Nielson Norman supports the argument that carousels reduce the visibility of your content. A user was given a task on a site where the answer appeared in a carousel. She failed to complete the task because “the panel auto-rotated instead of staying still”.

So dynamic content like carousels hide content, and the answers to your users questions. In contrast, static content is always visible to your users.

Why you think you need a carousel

I would be rich if I had a pound for every time someone told me they wanted a carousel on their website because they:

  • look nice
  • make the page more inviting and more attractive to users
  • showcase our best assets

Let’s go back to what people come to your website for – to answer a question. Now, ask yourself – do any of the reasons given above help a user to complete a task?

If you still need convincing that carousels aren’t great, just take a look at Jared Smith’s website Should I Use a Carousel?

Creating content that answers user questions

So after telling you that you need content that answers users questions, here’s some guidance to help you plan and write effective content (University login required).

Share this post:

Editing Images for Use on Your Website

Last week, Jane wrote about how to improve your website images and videos. Her post focused on image selection and placement. Go and read it if you haven’t already, it’ll set you up for what’s to come.

Welcome back.

In this post I’m going to cover some tips for editing images for your website.
Our new template has a much more visual feel than our current design. There are a number of ways you can use images to enhance your written content.


These can include landing page and news grids.

Example of a homepage gridMastheads

Mastheads provide a visual opener to a page. The image slider used in our current design gives a similar effect.

Example of a mastheadIt’s a full width image with a text overlay. This means that you need to think carefully about where the focus of your image lies. If it’s on the left of the picture then it’s going to be obscured by the text. We’ve got a visual guide to the safe zones which highlights where the danger areas are.

Details of safe zones for a masthead imageThe safe zones logic applies to the image slider in the existing template too. An example of this in use is the Newcastle University London website.

Content images

You can also add images into the main content area. The default alignment for these is on the right (like our current design). On mobile they stretch to fill the full width and flow below the content.

This behaviour requires landscape images. If you’re using our current template we recommend you use landscape images too – this means your images are more likely to be reusable in the new template.

Tools for cropping and resizing images

We’ve assessed a variety of online photo editing tools and found one for you that’s easy to use and retains the high quality of your original photography. It’s called Fotor.

See our image guide (University login required) for details of the required sizes for each type of image and a step-by-step guide to using Fotor.

Share this post: