So you’re thinking about image accessibility. That’s great. But is your alt text implementation actually making your site worse?
Alternative text (or ‘alt text’) is used by screen readers to describe the contents of an image to a user who may have difficulty seeing it. It should convey meaning where possible.
Content editors, not developers, are generally responsible for the bulk of the website material. This article is focused on helping them understand the implications of getting it wrong.
Should you add or omit alt text?
There is a big difference between specifying blank alt text and omitting alt text tags entirely.
It’s an important distinction and it’s not something your content editors are likely to be aware of. After all, web accessibility is not generally the first thing they think about. They’re not developers (although of course, this shouldn’t imply that only developers should be concerned about accessibility).
For the HTML-friendly among you, alt text appears in code as
<img alt="">or just
<img alt>If you do not include any alt text HTML at all, then a screen reader will do its best to read out what it thinks should go in there, often with terrible results. The best guess is usually just to read the filename.
If that’s “Screenshot 2020-11-06 at 16.21.25”, that’s a big problem.
Recap – what is alt text actually for?
Consider this image, which depicts a photograph of a pear, a banana, and an apple. Let’s say this appears on an online menu with a message asking you to choose your favorite fruit.
I am a sighted user so for me, it’s easy to see each photo. I can easily use my mouse to click on one of the pictures and choose a fruit.
Now, consider a blind or visually-impaired user who makes use of a screen reader. With correct alt text, the image would be read out as ‘Pear’, ‘Banana’, and ‘Apple’.
This is a fairly common use of alt text. Whatever you add to your images will be read out before the hyphen in these examples.
This really simple but slightly contrived example shows how incredibly useful alt text is to screen reader users. In fact, in this example, it’s essential. Without alt text, this process of choosing a fruit would be unusable by a screen reader user.
So just add alt text and done?
Well not quite. You might think that just adding alt text with abandon solves the problem. You’d be wrong though, unless you consider the context of your alt text.
Let’s take this example. It’s an image which shows instructions on how to charge your phone.
The text reads “Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided”.
The image next to the text shows a picture of a phone and charger, illustrating where to put the power cable both at the phone end and at the power outlet end.
The alternative text reads “Charging phone”.
Now, this is an example of an image which conveys useful, in fact in this case, critical, information, but the alt text does not. In this case, a screen reader user will not get specific instructions on where to plug the power cables.
This next image is identical, except the alt text in the image reads “Plug cable into bottom edge of phone”.
So now, a screen reader user has all the information they need to charge their phone. Connect the cable to the power outlet and plug the other end of the cable into the phone.
Sighted users can see enough information in the image that they probably wouldn’t even need to read the text to be able to work out what they need to do.
You can understand that it’s not quite as simple as just adding text. You need to make a judgment call whether you think the image conveys information that03 is not otherwise present in the surrounding text.
Information presented in a graph
Let’s take another example of crucial information presented in an image. One of the most popular forms of visual communication of data is the graph.
Imagine you have a picture of a graph showing UK Coronavirus cases over time.
If you do not add either body text or alternative text describing what the information shows, then this becomes useless to a screen reader user.
If this image appears without an explanation, and the alternative text is set to something like ‘Coronavirus cases in the UK’, then this not only unhelpful, but actually creates a barrier to accessing this information.
Instead, the alt text should include the information the graph is trying to convey. In this example, ‘Graph showing UK Coronavirus daily case increase from 1,700 per day to 20,000 per day, between August 15th 2020 and November 15th 2020’ would be useful alt text.
Again, context is key here. You need to consider what is happening in the surrounding text of the article or blog post, or whatever you are writing.
Too much, or unnecessary, alt text?
Let’s take a probably fairly common example of a menu containing both text and an image or icon for each item.
The menu contains four text links, Auditory, Visual, Motor and Cognitive. There is an icon for each option next to each link.
What’s the correct way to present alt text in this situation?
Well, if your idea is to add alt text to the icons explaining what they are, then you’d actually be making the experience worse for screen readers.
In this case, each menu item would be read out something like “Ear receiving sound – Image” followed by “Auditory – Link”.
Consider the context here. Is a description of the icons in this menu useful? Probably not. They don’t add to the utility of this menu, rather, they take away from it.
Instead, you should specify blank alternative text for each icon in the list. This then marks them as decorative to screen readers, and they’ll be ignored. This results in a much more pleasant experience where only the link text is read out.
The icons themselves still serve their purpose to sighted and even dyslexic users, so they should remain of course. But for a visually impaired user, alt text would be a hindrance if added.
Always think of the context
To wrap up, you should consider the following questions when deciding whether to add alternative text.
- Is this image purely decorative?
- Will important meaning be lost if no alt text is added?
- Does text content include information present in this image?
And if you decide that alt text should be added, consider:
- How can I describe this image’s information in context?
Finally, remember, there is a big difference between specifying blank alt text and omitting alt text tags entirely. By omitting, the screen reader will probably read the filename of the image.
