Alt Text for Linked Images and Images with Text

Hello and welcome to module 3 of our accessibility training. This video will cover some special cases for alt text, including linked images, images with text, and complex images.

You might be wondering why alt text for linked images is any different than alt text for images that do not link to anything. If we return to our idea of alt text conveying the meaning of an image, this starts to make sense. The meaning of a linked image is in both the contents of the image and its function.

In terms of accessibility, describing the link destination lets users know where clicking the image will lead. You could think of this as a sort of anchor text for images, describing the link in text, rather than simply leaving a non-descriptive URL.

For example, if this image were included on a page in order to link to the Carleton University Art Gallery’s First Nations and Métis collection, its alt text could read: “Mary Anne Barkhouse’s Locavore, when clicked brings you to CUAG’s First Nations and Métis art collection page.”

Of course, remember to include further description of the image if meaningful in the surrounding context.

Text that is part of an image is unable to be read by most screen-readers, and poses issues like pixelation when enlarged by screen magnifiers. This is a significant accessibility concern, especially when some pages choose to convey vital information in images, like in the image below on the right.

However, in other images, the text is irrelevant to the meaning of the image. In the image on the left, the book titles are likely not important to the overall meaning of the image, and so the alt text could just be: “A line up of paperback books”. Of course, if the purpose of the image was to point out a specific title in the line up, this title should be mentioned in the alt text. And, if the image is purely decorative, no alt text is needed.

Some images, though, include vital text. Rather than using alt text on an image like the one on the right, this warning should be conveyed instead in text. However, if for some reason, the image cannot be replaced by text, the alt text should exactly replicate the image’s text, as that’s the meaning of the image. Details like the background and text colour are most likely not necessary to the meaning of the image.

Here is another example of text used in an image, where the text is vital to the image’s meaning. Like the previous example, the information in this image should be conveyed in the text content of the page instead. Rather than use alt text, describe the instructions in the image in the surrounding text, including any information conveyed through the visuals. With this information included in the body text, the image can then be removed or the alt text left blank, since any information the image contains is already included in the body text.

Another type of image that uses text is a complex image. This category is made up of any images that use both text and visual elements to convey information that cannot easily be translated into plain text. The primary example of these types of images is the graph.

Here, the graph is given a caption and drop-down explaining its meaning. This is helpful for both people who cannot view the graph, as well as users who are unfamiliar with interpreting graphs.

While these different examples might make it seem like there are a lot of rules, they all stem from our rule of thumb: that alt text should convey the meaning and purpose of an image. This should be reflected in whether or not alt text is included, as well as what is written in the alt text (or in the surrounding body text), including for linked images and images with text.