Success Criterion 1.1.1 (Level A)
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?
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.
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.
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.
<img src="phone.png" alt="Telephone" />
<img src="dog.jpg" alt="Dog with a bell attached to its collar." />
<img src="print.png" alt="Print this page" />
<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?
WCAG SC 1.1.1 - Quick Reference
Technical guidance is available for implementing this Success
Criterion at the
Understanding Success Criterion 1.1.1: Non-text Content page.
Additional Resources to help you:
Web Accessibility Images Tutorial
HTML <img> alt Attribute
Images Bookmarklets for Accessibility Testing
Web Accessibility Evaluation Tool