Text alternatives for images with captions
We need a text alternative for informative or functional images. But what should we do when the image also needs a caption? In this article we discuss the options.
A quick survey shows three methods are commonly used for captioned images. None of them is ideal.
1: Repeat the caption as the text alternative
The problem with repeating the caption is that screen reader users will have to listen to the information twice. This can be tiresome when the caption is long. But even when it's relatively short, we're still repeating content. We wouldn't do this in text our sighted users read, so we shouldn't do it for vision impaired users.
2: Leave the text alternative blank when there is a caption
When a screen reader finds an image on a page it announces it by saying 'graphic' and then reading the text alternative. But when the text alternative is blank, it won't alert the user to the presence of an image—it says nothing.
This may not seem like much of a problem until you think about when a user might hear the caption read out. They may hear it long after the related content on the page has been read, or before, depending on where the image and its caption appear in the mark-up. And if the captioned image is only loosely related to the page content, the unexplained caption text might seem odd.
Sometimes users might want to know that there is an image on the page, even if they can’t use it themselves. They might be able to ask someone to provide more information about the image if they know it’s there. Or they might want to share it with a sighted friend or colleague.
3: Include extra information in the text alternative
Sighted users will usually miss out on any information about an image that you provide only in the text alternative. Some browsers don’t show the text alternative when you mouse over an image, and some users won’t even think to try.
An alternative: use a short text alternative and full caption
Use a short text alternative to quickly identify the image—preferably just one or two words. Fully identify the image in the caption.
Here are a few before and after examples to give you an idea of how this would work. The last example uses an approach I’ve been trying for a little while. It’s not the best idea for image search engine optimisation, but if you’re more concerned with a smooth reading experience for screen reader users, you could try it.
| Before | After |
|---|---|
alt=""<figcaption>Topographic map of Portsea, Victoria, prepared by Australian Section, Imperial General Staff, 1930</figcaption> |
alt="map" (or alt="Portsea map")<figcaption>Topographic map of Portsea, Victoria, prepared by Australian Section, Imperial General Staff, 1930</figcaption> |
alt="Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts."<figcaption> Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.</figcaption> |
alt="poster" (or alt="arts and crafts poster")<figcaption> Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.</figcaption> |
alt="Port Hedland storm surge 1935, photo courtesy Port Hedland Historical Society"<figcaption> Before and during a storm surge at Port Hedland, 1935</figcaption> |
alt="Storm surge"<figcaption> Before and during a storm surge at Port Hedland, 1935. Photo courtesy Port Hedland Historical Society</figcaption> |
alt="Photo of Roger Federer"<figcaption>Roger Federer</figcaption> |
alt="Roger Federer" (or alt="Photo of")<figcaption>Roger Federer</figcaption> |
Related articles
Want to know more about text alternatives? Here are some of our earlier articles on the topic.
Write better text alternatives
Improve your website's accessibility and SEO. Join our course - learn how to write useful text alternatives for images.
Book a course at https://4syllables.com.au/