Non-text Content | ��app Higher Education

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. ()

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="">