1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 1.1.1 Non-text content – Level...

1.1.1 Non-text content – Level A

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

Understanding Success Criterion 1.1.1: Non-Text Content by the W3C

Note!
For the purpose of readability, all images are referred to on this page as “images” whether they’re icons, images, infographics, charts, or something else, unless the type matters.

Checklist – System Foundations

Content

TestPriority
Did I ensure tooltips don’t repeat link text or other alternatives?Medium
Did I ensure that decorative or redundant images have no text alternative?Medium

Iconography

TestPriority
Is the image correctly implemented as an inline SVG, foreground image, or background CSS attribute?High
Did I confirm there are no SVGs embedded in <iframe> or <object> elements?Medium
If the image is an inline SVG does it have the correct title?High
If the image is an SVG does it have role=”img”?High
Are meaningful font icons marked with a role of img and an aria label?High
Are decorative or redundant font icons marked with aria-hidden=”true”?Medium
If the image is an inline SVG does it have an aria-labelledby attribute associated with the title element?High
Does the <img> have the correct alt text?High
Does the alt text avoid repeating text next to it?Medium
Is the alt text 150 characters or fewer?Medium
Do repetitive interactive icons have a unique label?High
Exception case: does a meaningful background image have alt text?High

Checklist – Components

Canvas elements

Warning!
Before using <canvas> elements, read Using <canvas> accessibly.
TestPriority
Does the <canvas> element have role=”img”?High
Does the <canvas> element have alt text?High

Charts and Infographics

TestPriority
Is the image correctly implemented as an inline SVG, foreground image, or background CSS attribute?High
Did I confirm there are no SVGs embedded in <iframe> or <object> elements?Medium
If the image is an inline SVG does it have the correct title?High
If the image is an SVG does it have role=”img”?High
If the image is an inline SVG does it have an aria-labelledby attribute associated with the title element?High
Is all of an informational inline SVG’s text in its label?High
Does the <img> have the correct alt text?High
Does the alt text avoid repeating text next to it?Medium
Is the alt text 150 characters or fewer?Medium
Does complex imagery that can’t be described in 150 chars have a long description?High
Is the long description available to all users?Medium
Is the long description programmatically associated with the image?Medium
Exception case: does a meaningful background image have alt text?High

Custom objects

Information
The best way to make an <object> accessible is to recreate it in HTML, CSS, and JavaScript.
TestPriority
Does the <object> element have alt text?High

Image Maps

TestPriority
Does the <img> have the correct alt text?High
Does each <area> have the correct alt text?High
Is the alt text 150 characters or fewer?Medium

Forms

Image Inputs

TestPriority
Does the image input have alt text?High