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.
- Informative image:
<img src="phone.png" alt="Telephone" />
<img src="dog.jpg" alt="Dog with a bell attached to its collar." />
- Functional image:
<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?
Additional Resources to help you:
- Web Accessibility Images Tutorial – W3C tutorial
- Alternative Text – WebAIM learning article
- HTML <img> alt Attribute – W3Schools self paced course
- Images Bookmarklets for Accessibility Testing (includes other Bookmarklets) – Paul Adam testing tools
- Web Accessibility Evaluation Tool – WebAIM checker tool