Text alternatives for images with captions

Web writers must provide a text alternative for informative or functional images. But what should you 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=””

Caption: Topographic map of Portsea, Victoria, prepared by Australian Section, Imperial General Staff, 1930

alt=”map” (or alt=”Portsea map”)

Caption: Topographic map of Portsea, Victoria, prepared by Australian Section, Imperial General Staff, 1930

alt=”Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.”

Caption: Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.

alt=”poster” (or alt=”arts and crafts poster”)

Caption: Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.

alt=”Port Hedland storm surge 1935, photo courtesy Port Hedland Historical Society”

Caption: Before and during a storm surge at Port Hedland, 1935

alt=”Storm surge”

Caption: Before and during a storm surge at Port Hedland, 1935. Photo courtesy Port Hedland Historical Society

alt=”Photo of the Prime Minister, Julia Gillard”

Caption: Prime Minister, Julia Gillard

alt=”Julia Gillard” (or alt=”Photo of”)

Caption: Prime Minister, Julia Gillard

Related articles

Want to know more about text alternatives? Here are some of our earlier articles on the topic.