Non-Text Content
Success Criterion 1.1.1 (Level A)

Question:

Does your site or application provide text alternatives for images or 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
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 an “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 total visitors for the first quarter 2019 for sites 1 to 3" />
  • Decorative images (with no information needed to understand content): 
    <img src="background.png" alt="" />

Need technical guidance?

Additional Resources to help you: