Writing Alternative Text

Overview
Alt Text for Images
Examples
How to Add Alt Text
Resources

Overview

Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who need screen readers to read online visual content. We will be discussing alternative text for images only, though the principles can be applied to media and other non-text content.

Alternative text serves several functions:

It is read by screen readers in place of images, allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
It provides a semantic meaning and description to images that can be read by search engines or be used to later determine the content of the image from page context alone.

Computers and screen readers cannot analyze an image and determine what the image presents. You provide that context when you create meaningful alt text.

The goal of alternative text:

If your content contains images which carry meaningful information students are intended to receive through that image...the goal of alternative text is to ensure equitable access to that meaningful information for students who cannot perceive that image!

Alternative Text for Images

When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different from another similar image based upon the context and surroundings of the image itself.

The first steps when creating appropriate alternative text for an image is to decide whether the image presents content and whether it has a function. In most cases, an image will only have a function if it contains a link. If the content surrounding the image conveys the context of the image, then simply marking the image as decorative will suffice.

When creating alt text, consider the following rules:

Be accurate and equivalent in presenting the same content and function of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically, no more than a few words are necessary, though rarely a short sentence or two may be appropriate. Some helpful questions are:
- What is it my students need to learn from this image?
- Has the image already been described in the text?
- Does all of the content in the image need to be described or is there a specific thing that students need to learn from the image that is paramount?
- Are there other ways to represent the meaning of the image that are simpler than this image?
Avoid redundancy by not providing the same information as text within the context of the image.
Avoid using the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

What about Complex Images?

Complex images such as maps, infographics, graphs, and charts frequently communicate much more than can be easily added or read in a simple alt-text value. In this case, we recommend viewing the Web Accessibility Initiative's (W3C's) Images Tutorial. This is an extremely valuable resource and provides many examples of different types of images and functions of images.

You are also welcome to view a recording of the DLI Complex Alt-Text Webinar (which covers the site linked just above) and download the presentation

Some Alt-Text Examples

Example 1
[text] Kamala Devi Harris is an American politician and attorney who is the 49th and current vice president of the United States. She is the first female vice president and the highest-ranking female official in U.S. history, as well as the first African American and first Asian American vice president. (Wikipedia)

Choose the most appropriate alternative text for the image in Example 1 from the four choices below.
1. "Image of Kamala Harris"
2. "Kamala Harris, the first female vice-president of the United States"
3. "Mark as decorative” will suffice.
4. "Kamala Harris"
Consider, in the example above, the image's purpose is to inform the reader that this is Kamala Harris. The image has no function because it is not a link and is not clickable. So which one should we have picked?

Option A, "Image of Kamala Harris," unnecessarily describes the image as an image.

Option B, "Kamala Harris, the first female vice president...," provides extra information that is not presented directly in the image and it is also redundant with content presented within the text.

Option C, "Mark as decorative," is not appropriate because the image conveys content that is not directly presented in the surrounding context.

In this case, providing the alt text of simply “Kamala Harris” is sufficient to convey the meaning of the picture, therefore Option D is correct.

Even though the surrounding text does indicate that it refers to Kamala Harris, visual users can tell this directly from the content of the image - so if the image conveys content, it should be given alternative text.
Example 2
Figure 1: Kamala Harris

[text] Kamala Devi Harris is an American politician and attorney who is the 49th and current vice president of the United States. She is the first female vice president and the highest-ranking female official in U.S. history, as well as the first African American and first Asian American vice president. (Wikipedia)

Choose the most appropriate alternative text option for the image in Example 2 from these choices:
1. "Image"
2. The image does not need alt text.
3. “Mark as decorative” will suffice.
4. "Kamala Harris"
In this case, the content of the image is presented within the surrounding content (caption), so Option C, "Mark as decorative," is the best choice.

Option A, "Image," provides extraneous and useless information.

Option B, "The image does not need alt text," is never the right choice – every image must either have alt text or be marked as decorative.

Option D, "Kamala Harris," would be redundant because the caption already tells us that.
Example 3
[text] In this painting from the Netherlands, the artist, Koekkoek, captured a winter wonderland.

Consider which of th: following choices would be the most appropriate alternative text for the image in Example 3?
1. “Men on road”
2. “Painting of men on road”
3. “Koekkeok’s painting of men on road”
4. “A classic painting demonstrating light and shadow”
5. “Painting of men stopping to chat on the road. They are depicted with their sleds as the ground is covered in snow. There are other travelers in the distance”
As before, we should determine if the content of the image is presented in the surrounding context. In this case, it is not (at least not entirely). The image is not within a link, so there is no function. But this image provides a much more difficult examination, and the best answer may not be adequately determined by the limited context we've been given. Regardless, let's look at the possible options.

Option A, "Men on road," probably does not adequately describe the content of the image. The fact that it is men on a road in the painting may not necessarily be relevant in this context.

Option B, "Painting of men on road," may be adequate but does not provide much additional content. However, it may be appropriate to describe the image as a painting, as opposed to a photograph or other image type.

Option C, "Koekkeok's painting of men on the road," provides more information that may help the user identify the content itself. Remember that alternative text is not just for users with visual impairments. Many sighted users would be able to identify the specific painting in question given this description, whereas "Men on road" alone would not be descriptive enough.

Option D, "A classic painting demonstrating...," might be appropriate if the purpose of the image is to present a specific art technique and the content of the image itself is not important.

Option E, a brief but detailed description of the painting, may also be an appropriate alternative if a detailed examination of the painting is in order but is too long and verbose to be of much use - such text would be better served as text within the document or web page.

As you can see, there is no one right answer here. The best alternative text will depend on the context and intended content of the image.
Example 4
Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should be marked as decorative so screen readers will skip reading them.

Content text here.

Footer text here.

What would be the appropriate alt text for the horizontal separator image above?
1. "Decorative line"
2. "Beginning of footer"
3. "Separator"
4. Marking the image as decorative will suffice.
Because the image does not convey content and is not within a link, Option D, "Mark as decorative," is the most appropriate choice. Any description of the image is not appropriate.

Documents or webpages with decorative images may provide a more interesting context for sighted readers who can perceive them and dismiss them as decorative easily. However, for readers using assistive technology, those same images can end up being a major distraction. The video below is an example of a website being read by the NVDA screen reader. In this case, a sighted reader sees the background images but can easily focus on the text as intended. However, because the images are not marked as decorative or given a null alt value, if you turn the sound up on the video, you can hear what a person using a screen reader will experience.

How to add Alt Text to Images

Now that you’ve had a crash course in the basics of adding alt text to images, you may wonder how and where to add this alt text. The answer differs from program to program. Here are some links to the common products we use to create documents:

Microsoft Suite

Desire to Learn (D2L) has two ways: Providing Alt Text when first inserting the image and Editing existing items alt text.

On most software, you right-click an object and look for the words “alt text” or “accessibility”.

For more complex images, please feel free to watch a recording of the DLI Complex Alt Text Webinar and download the presentation.