Level A Perceivable WCAG 2.0+

Success Criterion 1.1.1: Non-text Content

Official W3C Definition

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.
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
  • Test: If non-text content is a test or exercise that would be invalidated 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.
Web Content Accessibility Guidelines (WCAG) 2.2

Why This Criterion Matters

Non-text content includes images, icons, charts, diagrams, audio, video, and interactive elements. Without text alternatives, users who cannot perceive this content are excluded from accessing the information or functionality it provides.

Text alternatives enable:

  • Screen readers to announce image content to blind users
  • Braille displays to convert visual information to tactile output
  • Search engines to index and understand image content
  • Text-to-speech applications to read content aloud
  • Users with slow internet connections to understand content before images load

Who Benefits

Blind Users

Screen readers can announce text alternatives, providing access to visual content.

Low Vision Users

May use screen readers or magnification with text alternatives for context.

Cognitive Disabilities

Text alternatives can help clarify complex images or provide additional context.

Deaf-Blind Users

Can access text alternatives through refreshable Braille displays.

How to Meet This Criterion

Technique 1: Provide Alt Text for Informative Images

Use the alt attribute to describe the purpose and content of meaningful images.

Good Example 
<img src="chart-q3-sales.png" 
     alt="Q3 2024 sales chart showing 25% increase in revenue compared to Q2, with highest sales in September">
Bad Example 
<img src="chart-q3-sales.png" alt="chart">
<!-- Alt text is too vague and doesn't convey the meaning -->

Technique 2: Use Empty Alt for Decorative Images

Decorative images that don't convey information should have an empty alt attribute so screen readers skip them.

Good Example 
<img src="decorative-border.png" alt="">
<!-- Screen readers will skip this decorative image -->

Technique 3: Provide Labels for Icon Buttons

Buttons with only icons must have accessible names.

Good Example 
<button aria-label="Search">
    <i class="fas fa-search"></i>
</button>

<!-- Alternative using visually hidden text -->
<button>
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="visually-hidden">Search</span>
</button>

Technique 4: Complex Images with Long Descriptions

For complex images like diagrams or infographics, provide detailed descriptions.

Good Example 
<figure>
    <img src="organization-chart.png" 
         alt="Company organizational chart"
         aria-describedby="org-chart-desc">
    <figcaption id="org-chart-desc">
        The CEO reports to the Board of Directors. 
        Three VPs (Operations, Sales, Technology) report to the CEO.
        Each VP manages 3-5 department heads.
    </figcaption>
</figure>

Common Failures to Avoid

Failure Problem Solution
Missing alt attribute Screen readers announce the file name instead Always include alt attribute, even if empty
Alt text says "image" or "photo" Doesn't describe the actual content Describe what the image shows or conveys
Decorative images with descriptive alt Creates unnecessary verbosity Use alt="" for purely decorative images
Icon fonts without labels No accessible name for screen readers Add aria-label or visually hidden text
Using CSS background images for content Cannot have alt text Use <img> elements for meaningful images
Alt text too long (over 125 characters) Difficult to listen to; may be truncated Keep alt brief; use aria-describedby for details

Testing Methods

Automated Testing

Manual Testing

  1. Disable images: Can you still understand the content from alt text alone?
  2. Screen reader test: Navigate through images with NVDA, JAWS, or VoiceOver. Do announcements make sense?
  3. Code inspection: Check that every <img> has an alt attribute
  4. Context check: Does the alt text convey the same information as the image in its context?

Questions to Ask

  • If you couldn't see this image, what would you need to know?
  • Is this image purely decorative or does it convey information?
  • Does the alt text duplicate adjacent text content?
  • For complex images, is there a detailed description available?

Related Criteria

1.2.1 Audio-only and Video-only

Text alternatives for audio and video content

4.1.2 Name, Role, Value

Accessible names for all interface components

1.3.1 Info and Relationships

Programmatic structure for content relationships

2.4.4 Link Purpose

Links must have meaningful accessible names

Additional Resources

On This Page

WCAG Overview Get Help