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
Checklist – System Foundations
Foundations that don’t display here generally aren’t affected by this guideline.
Content
| Test | Priority |
|---|---|
| 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
Illustrations
Checklist – Components
Components that aren’t listed here generally aren’t affected by this guideline. For components that contain icons or other foundation elements, check the list for the foundation element.
Similarly, if you add icons or images to a component that doesn’t generally have one— such as Blockquote — check the list for iconography above.
Alert Banners
This assumes that the banner has an icon indicating severity of the issue.
Breadcrumbs
This assumes the breadcrumb trail.
Buttons
This assumes you have a button variant with an image in it.
Canvas elements
<canvas> elements, read Using <canvas> accessibly.| Test | Priority |
|---|---|
| Does the <canvas> element have role=”img”? | High |
| Does the <canvas> element have alt text? | High |
Charts and Infographics
Custom objects
<object> accessible is to recreate it in HTML, CSS, and JavaScript.| Test | Priority |
|---|---|
| Does the <object> element have alt text? | High |
Expandable Containers: Accordions
This assumes the accordion has an icon indicating whether it is open or closed.
Image Maps
| Test | Priority |
|---|---|
| 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
| Test | Priority |
|---|---|
| Does the image input have alt text? | High |