How to Describe Images for Accessibility and Findability
The University’s Digital Design system provides a number of options for the use of images. From visual grid layouts to page headers and media carousels.
Many users of our websites don’t see these images. They may change browser settings not to show 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
Alt text provides an alternative, textual content when an image cannot be displayed or for users of screen readers. It should be descriptive, but not necessarily a literal description of the image. Think about describing what the image represents.
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 keywords 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.
Exceptions
Alt-text is not needed for:
- purely decorative images, eg for a page header or key messages grid
- where an image is overlaid with link text, eg dual panels
However, there still needs to be an alt tag for the image 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. In T4 if the editor leaves the alt text field empty this field will still appear in the code.