Non-text Content - Success Criterion 1.1.1 (Level A)

Question

Does your site or application provide text alternatives for images and other non-text content?

Why is this important?

Non-text content, such as an image, chart, graph, or an image of text, is often unusable to those with visual or auditory disabilities. By providing text alternatives for non-text content, users can change that text into other formats they may need to access and understand content.

Whom does it benefit?

Example 1

As a person with a visual impairment who cannot see images displayed on the screen,
I want to use a text-based speech output device
so that I can listen to alternative text and understand the meaning of the information being visually conveyed.

Example 2

As a person with a cognitive disability who has difficulties understanding the meaning of images, graphs, charts, animations, etc.,
I want to access text explanations
so that I can better understand the material being presented.

Example 3

As a person who is deaf or has a hearing impairment,
I want to use text-based output (e.g. transcript or closed captioning)
so that I can read audio-based content.

What should you do?

Provide concise and meaningful text alternates for all non-text content. The description needs to provide enough information so that the purpose of non-text content can be understood even if it is removed.

Non-text content should contain a text alternative if:

It enhances, provides additional instruction, meaning or is otherwise relevant to the information that is being conveyed within the content of the web page or document.

Non-text content does not need a text alternative if:

It is considered “eye-candy,” meaning it is decorative and for visual enhancement or formatting only, and does not provide any contextual meaning.
The non-text content is redundant because it illustrates what is already described in the narrative and/or caption. (other exceptions found in WCAG Success Criterion 1.1.1)

How do you do it?

Ensure text alternatives are contextual and enable the reader to comprehend the information in the manner intended. The method of providing a text alternative to non-text content can vary depending on the type of non-text content that is being used. A text transcript, a long description, or and “alt=” html tag are examples of ways to provide a text alternative.

For audio, provide a link to a text transcript immediately after the link to the audio clip.

For images, provide a text alternative in code by using an “alt=” tag after the image source tag to ensure that images can be used by people with various disabilities.

Examples:

Informative image: <img src="phone.png" alt="Telephone:">
Informative image: <img src="dog.jpg" alt="Dog with a bell attached to its collar.">
Functional image: <img src="print.png" alt="Print this page">
Complex image: <img src="chart.png" alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
Decorative images (with no information needed to understand content): <img src="background.png" alt="">