1.1.1: Non-text Content
1.1.1: Non-text Content
WCAG 2.1 – 1.1.1 Non-Text Content that is presented to the end user must have an alternative that explains its purpose
We often take things for granted like the sheer amount of information and content contained in a images, charts, animations, and maps. People without a visual impairment will consume information from images on websites, apps and digital documents while reading through the main body of text.
People who can’t see these images will not be granted any of the contextual information they provide. Content writers who naturally rely on the use of images to convey detail in their articles often overlook providing an alternative that explains the purpose of the image. Doing so will deny an end user with a disability access to the full context of the article.
Intent
The intent of this Success Criterion is to make information conveyed by non-text content accessible using a text alternative.
Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory, or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it.
In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.
Alt-text The Solution
If we take images as an example, we can provide an alt-text tag to the html of a webpage and thus add a contextual description for the picture that will be read only by a Screen Reader such as NVDA, JAWS, TalkBalk and VoiceOver. By adding these tags we can describe the image in a way which will give context to the end user in the same fashion as someone with sight will gleam the contextual information seeing the image.
Often content providers will use images to give detail or context to their article. They may show an image of a sports team where the visual contextual message is teamwork, or they might display an image of an office were people are working together and smiling were the visual contextual message is a pleasant work environment. We can provide an alt-text description which describes the image and thus allowing the end user to receive the same context.
Some images may contain large amounts of text or graphical information and we will talk about alterative solutions to these infographics in a future IA Labs blog. Where logos contain a strap line we can add straplines to the alt-text of the image.
How much alt-text should I add?
If we look at the provided image of a family having a picnic. The worst case scenario is no alt-text, but lets discuss some other examples.
Poor example of alt-text
<img src=”picnic.png” alt=”picnic”>
Good example of alt-text
<img src=”picnic.png” alt=” family enjoying a picnic under a tree”>
Alt-Text with too much info
<img src=”picnic.png” alt=” A Man in a Pink shirt, a women in a white top and young boy with a blue top having a picnic under a tree. Orange Juice is on the table. A shaft of light breaks through the surrounding trees.”>
How Can IA Labs help?
As part of our consultations, accessibility audits, and training sessions, we can identify and explain all the contextual nuances that would apply to WCAG 2.1 – 1.1.1 Non-Text Content. If you have any questions or need any help with any digital accessibility issue please don’t hesitate to make contact with IA Labs.
