Alt Text Examples
The following are a few different examples of images and their alt attributes.
Example 1: Portrait of George Washington
Consider this image of George Washington.
Currently, the image has text in a title attribute and in an alt attribute. (Hover over the image to view the title text.) The alt text is "Portrait of George Washington."
This alt text is appropriate for use in a history or political science course where the emphasis is on the person portrayed in the portrait (i.e., the first president of the executive branch of the United States federal government).
The same image, however, could also be used in an art history course. In this context, the description may include the subject, the media type (photograph, oil painting, etc.), the creator, and the year the image was created: <img alt="Gilbert Stuart's 16th-century painting of George Washington."/>.
Takeaway: Context matters.
Example 2: Cherries
This is a decorative image being used to add visual interest to the page. The alt attribute for this image is: alt="" (no space between quote marks).
Screen readers will ignore the image.
Hiding the Image Caption
What if a decorative image has a caption, like this photo of a cherry tree? If you add aria-hidden="true" to the opening figcaption tag, the caption will be skipped by a screen reader. The code looks like this:Thinkstock Images
Takeaway: To a person who is blind, page structure and organization are communicated through the use of proper heading tags and HTML markup rather than visual cues, such as decorative images, dividing lines, or background color choice. Images for visual interest that do not convey information should be skipped by screen readers to lessen the cognitive load.
Example 3: Venn Diagram
What if the alt attribute said, "A Venn diagram showing the results of a survey of 250 European travelers. 93 have traveled to Africa, 155 have traveled to Asia, and 70 have traveled to both of these continents. This is represented by a pink circle representing Africa intersecting with a blue circle representing Asia."
This is very long and wordy for alt text. Should this be a long description instead, which we will cover in the next part of this module? No, it can remain as alt text after shortening it to only include the most important information. A more concise version of this alt text could be, "A Venn diagram showing 93 survey respondents have traveled to Africa, 155 have traveled to Asia, and 70 have traveled to both."
Takeaway: You would not want to say, "a pink circle representing Africa intersecting with a blue circle representing Asia" as the colors are not important to the meaning. This principle is true for all text descriptions. Don't worry about describing colors, shapes, or positioning if that information does not convey meaning.
Updated February 2020