WCAG 1.1.1 Non-text content

Success Criterion 1.1.1 Non-text content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. Controls, Input

If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.) Time-Based Media

If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.) Test

If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content. Sensory

If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. CAPTCHA

If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. Decoration, Formatting, Invisible

If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

How to test?

Using Automated Testing Tools

Using any of the automated accessibility testing tools, one should be able to detect if non text contents have a text alternative. Remember that automated tools can only identify if an element has text alternative or not but they cannot identify if text alternative is appropriate.

Using ANDI: Navigate to the website, run ANDI, click on Graphics/images from the menu. ANDI will show list of images and ANDI output. when there is no output, ANDI will show the error.

Using aXe DevTools: Navigate to the website, Open Developer console and run aXe Dev Tools. Navigate to the rules section and you will find a description “Images must have text alternatives” when there are issues related to images on the page. Using the pagination options, you can browse one issue to another.

Rules for text alternatives

• Informative images and active images must have text alternative
• Informative images should not be a background image; instead bring image to foreground and provide text alternative
• Alternate text should not have more than 255 characters
• Alternate text must be meaningful
• Decorative images must have an empty alt attribute without a space.

When an issue is reported, it should have issue description and possible recommendation. Recommendation need not have exact fix but offer guidance to fix.