Understanding 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.

Official Requirements:

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 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.

Why Is It Required?

We need to provide text-based alternatives to make the non-text content accessible to make sure assistive technology(AT) can convey the information to people with disabilities.

How Do We Fix It?

Images: Give alt attributes to the relevant images

Image links:  Provide alt-text that describes the destination of the link

Audio and Video files: Should have captions

Charts and graphs: Short and long descriptions as required to convey the information

CSS images: use an aria-label with role=”img

CAPTCHA: Explain the purpose of CAPTCHA and provide an alternative in another sensory modality.

Are There Any Exceptions?

It is difficult to provide captions for live audios and videos, therefore just provide a descriptive label. If non-text content available on your website creates a specific sensory experience, just provide a description and purpose of the content.

Know Your DFIs

DFI is a simple way to remember or understand your non-text content, it stands for Decoration, Informative and Formatting. If the non-text content available on the website just to increase visual appeal(decoration), generated by visual formatting (CSS), or it is not visible to your users then steps should be taken to ensure that the AT can avoid it.

Mistakes To Avoid

Lastly, we have listed out the common mistakes committed by websites

  1. Relevant image having no alt attribute
  2. Images having alt attribute but does not match or conveying the same information as the image
  3. Two or more different images having the same alt-text


Understanding Success Criterion 1.1.1: Non-text Content

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media


Related Blogs

What is AEL Accessibility Checker (AAC)

What is AEL Accessibility Checker (AAC)?

Wondering how Accessible your website is to everyone? With AEL Accessibility Checker (AAC), you can quickly evaluate your web page against automated Accessibility violations.  AAC

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content