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 equivalentin 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 redundancyby 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. This is an extremely valuable resource and provides many examples of different types
of images and functions of images.
We also view ourself-paced module that walks you through the images tutorial linked above.
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:
Desire to Learn (D2L) has two ways: Providing Alt Text when first inserting the image and 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 and download the presentation.
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.
"Image of Kamala Harris"
"Kamala Harris, the first female vice-president of the United States"
"Mark as decorative” will suffice.
"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
[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:
"Image"
The image does not need alt text.
“Mark as decorative” will suffice.
"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?
“Men on road”
“Painting of men on road”
“Koekkeok’s painting of men on road”
“A classic painting demonstrating light and shadow”
“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?
"Decorative line"
"Beginning of footer"
"Separator"
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.