1.1.1 Non-text content

WCAG 2.1 Success Criterion

Understanding Non-text Content

How to Meet 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 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

1. Use an automated testing tool and/or Web Developer Toolbar (Images > Display Alt Attributes) to find and identify image alts.
2. Verify all significant images have appropriate alt text (see W3C’s image tutorial)
3. Verify all images that qualify as decorative images have an empty alt attribute (alt="").
4. For controls without visible text, ensure that the control has an accessible name that describes its purpose.
   Example: A button adjacent to a search field displays an inline SVG icon of a magnifying glass, but no text. The button should have an aria-label appropriate to its function such as “search site”.

Decisions

Decorative when described by adjacent text

Where the meaningful content of the image is sufficiently described by adjacent text, the image can be marked as decorative with alt="".

Example: A page contains a list of company executives. Each executive has a heading with their name, followed by a small headshot image of the executive. The image can be marked as decorative.

Supporting resources and discussions

(Include links to WAI, prominent accessibility blogs, W3C mailing list discussions, related GitHub issues, etc.)

Trusted Tester: Images

W3C’s image tutorial