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
In terms of accessibility, the information given by any non-text content must also be provided as text, so that 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 equivilant purpose.
There are a few ways this text alternative can be provided:
- ‘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 fairly simple images such as a photograph or graphic, you can provide a text alternative using the ‘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 embedded text like the one below, you must make sure you include all that text and write it in a way that conveys the message of the image.
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 which is 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 important information.
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 some 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 may not be neccessary to explain them all in text form. What instead you should concentrate on, is providing a summary of the key points.
The most important thing is to ensure that users of screen readers or text-only browsers are not disadvantaged by not seeing the image and will still get the message that the chart is conveying.