Text alternatives for images
Images are used for various reasons online such as:
- to help tell the story e.g. a photograph
- provide information e.g. an infographic
- to act as a visual clue (signpost) to the content e.g. an icon
- to make a page more visually appealing
To meet accessibility standards, information given by non-text content must also be provided as text. This means it can be changed or interpreted into other forms such as large print, Braille, speech, symbols or simpler language. This text alternative must provide an equivalent purpose.
There are a couple of options for text alternatives:
- ‘Alt’ text value – is read out by screen readers or displayed if the browser cannot display the image.
- Text surrounding the image
Alternative (alt) text
For simpler images such as a photograph or graphic, you can provide a text alternative using ‘alt’ text. Most content management systems such as t4 or WordPress provide an alt-text field when adding an image. In the case of t4, this is manadatory.
When writing alt text, consider:
- What is the image saying? What is its function or purpose on the page?
- Does the image have any embedded text? Such as a slogan or a logo
- Does the surrounding content provide context? Is the subject of the image described?
Alternative text examples
1. A decorative photograph
If you used an image like this as a page banner:
The alt text could be:
A group of students talking on Dalby Court
As this image is only decorative, a simple text version describing what the image is showing is fine.
2. An image to support text content
In this example an image is being used in a news article.
Professor Carol Propper, from Imperial College Business School, has been made an International Fellow of the National Academy of Medicine.
Professor Propper, Associate Dean of Faculty and Research at the Business School, was named among 85 new members, including 10 international members, to be elected to the National Academy of Medicine (NAM), a prestigious US based body which “recognizes individuals who have demonstrated outstanding professional achievement and commitment to service.”
The supporting text explains who Professor Propper is and why she is featured, so the alt text would only need to say:
Professor Carol Propper
3. Graphics or photographs with text elements
For a graphic containing text like the one below, you must make sure you include all that text and convey the message of the image.
Imperial Lates presents, Greenovate. Explore a vision for a more sustainable future with a showcase of the green tech of tomorrow at our first Imperial Lates of the year
Describing charts and infographics
Sometimes you will want to include a more complex image such as a chart or an infographic displaying a lot of information. If you do not provide a text alternative for this content then users of screen readers will completely miss this.
It is not always possible (or recommended) to include all this information in the alt text field. So in these cases, you should include a summary paragraph or caption under the image which explains all the information or the message.
The infographic below has 10 pieces of information which will all need to be included as a text alternative.
To do this you should add a basic alt text to the image and a full text description under the image
Infographic showing key statistics about the Imperial College London website. Full text description below.
Infographic showing 211 bugs fixed, 58 new features released, 80 improvements developed, 656 ASK support questions answered, 18 websites audited, 14 platform and apps, 2 software systems replaced, 1,300+ editors, 150,000+ web pages, 24.2 million website visits.
Do I need to explain everything on a chart?
There will be occassions where a chart is showing hundreds of pieces of data. In these cases, if you are not expecting users to analyse each of these, then it is not neccessary to explain them all in text form. You should just concentrate on providing a summary of the key points.
The most important thing that users of screen readers or text-only browsers are not disadvantaged and will still get the message that the chart is conveying.