Loading...
Back to WCAG Success Criteria
1.1.1 Non-text Content
Level A
Principle 1: Perceivable
Success Criterion Statement
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for situations where the non-text content is purely decorative, is used only for visual formatting, or is not presented to users.
What This Means
Every image, chart, diagram, icon, and other non-text content on your website must have appropriate text alternatives that convey the same information or function to users who cannot perceive the visual content.
Must Have Alt Text
- • Informative images (photos, illustrations)
- • Functional images (buttons, links)
- • Complex images (charts, diagrams)
- • Images of text
- • Form input images
Can Have Empty Alt Text
- • Purely decorative images
- • Background patterns
- • Spacer images
- • Images used only for visual formatting
- • Adjacent text already describes the image
Why It's Important
Accessibility
Ensures equal access to information for users with visual impairments, making your content inclusive and accessible to everyone.
SEO Benefits
Search engines use alt text to understand image content, improving your website's search rankings and discoverability.
Technical Reliability
Provides fallback content when images fail to load due to slow connections, network issues, or disabled images.
Who Is Affected?
When non-text content lacks proper text alternatives, it creates barriers for various user groups:
Blind Users
Users who cannot see images at all
Impact Without Alt Text:
Cannot perceive visual information without text alternatives
Common Assistive Technologies:
- • Screen readers
- • Refreshable braille displays
Low Vision Users
Users with significant visual impairments
Impact Without Alt Text:
May have difficulty distinguishing details in images
Common Assistive Technologies:
- • Screen magnifiers
- • High contrast displays
- • Screen readers
Users with Learning Disabilities
Users who may have difficulty processing visual information
Impact Without Alt Text:
Text alternatives can provide clearer understanding
Common Assistive Technologies:
- • Text-to-speech software
- • Reading comprehension tools
Users with Slow Internet
Users on slow connections who disable images
Impact Without Alt Text:
Cannot see images that fail to load
Common Assistive Technologies:
- • Text-only browsers
- • Data saving modes
Search Engine Crawlers
Automated systems that index web content
Impact Without Alt Text:
Cannot understand image content without alt text
Common Assistive Technologies:
- • Web crawlers
- • SEO analysis tools
Implementation Procedure
Follow these steps to ensure all non-text content has appropriate text alternatives:
1
Identify Non-Text Content
Audit your website to find all images, charts, diagrams, icons, and other non-text content
Implementation Details:
- • Use automated tools to scan for <img> tags
- • Check for CSS background images that convey meaning
- • Identify SVG graphics and icons
- • Look for embedded media like charts and diagrams
- • Review decorative elements that don't add meaning
2
Categorize Content Type
Determine the purpose and function of each non-text element
Implementation Details:
- • Informative: Conveys important information
- • Decorative: Purely aesthetic with no meaning
- • Functional: Performs an action (buttons, links)
- • Complex: Requires detailed description (charts, diagrams)
- • Text images: Images that contain text
3
Write Appropriate Alt Text
Create text alternatives based on content purpose and context
Implementation Details:
- • Keep alt text concise (usually under 125 characters)
- • Focus on conveying the same information as the image
- • Don't start with 'Image of' or 'Picture of'
- • Use empty alt='' for decorative images
- • Include relevant context from surrounding content
4
Handle Complex Content
Provide detailed descriptions for complex images like charts and diagrams
Implementation Details:
- • Use longdesc attribute or nearby text
- • Create data tables for chart information
- • Provide step-by-step descriptions for processes
- • Use structured markup for complex relationships
- • Consider multiple formats (text, audio, tactile)
5
Test and Validate
Verify that your alt text provides equivalent information
Implementation Details:
- • Use screen reader software to test
- • Check with automated accessibility tools
- • Get feedback from users with disabilities
- • Validate HTML markup for proper implementation
- • Test with images disabled in browser
6
Maintain and Update
Keep alt text current and relevant as content changes
Implementation Details:
- • Update alt text when images are replaced
- • Review alt text during content audits
- • Train content creators on alt text best practices
- • Implement content management workflows
- • Monitor for missing or poor alt text
Interactive Examples
Toggle to see how alt text appears for screen reader users
Informative Images
Bad Alt Text
alt="chart"Good Alt Text
alt="Bar chart showing quarterly sales growth: Q1 $2.3M, Q2 $2.8M, Q3 $3.1M, Q4 $3.6M, demonstrating 57% year-over-year growth"Why This Works:
Describes the data and trends shown in the chart
Bad Alt Text
alt="office"Good Alt Text
alt="Modern open office space with collaborative workstations, natural lighting, and team members working on laptops"Why This Works:
Describes the environment and activity taking place
Bad Alt Text
alt="coding"Good Alt Text
alt="Developer writing JavaScript code on dual monitors showing a React application with component hierarchy"Why This Works:
Specifies the technology and context of the work
Decorative Images
Bad Alt Text
alt="abstract background"Good Alt Text
alt=""Why This Works:
Decorative pattern - empty alt attribute allows screen readers to skip
Bad Alt Text
alt="geometric shapes"Good Alt Text
alt=""Why This Works:
Background design element - no informational value
Functional Images
Bad Alt Text
alt="download icon"Good Alt Text
alt="Download PDF report"Why This Works:
Describes the action that will be performed
Bad Alt Text
alt="search"Good Alt Text
alt="Search products"Why This Works:
Describes the function, not the appearance
Complex Images
Bad Alt Text
alt="chart"Good Alt Text
alt="Line graph showing website traffic trends over 12 months"Why This Works:
Complex data requires both alt text and detailed description
Long Description:
Detailed data: January 45K visitors, February 52K (+15%), March 48K (-8%), April 61K (+27%), May 58K (-5%), June 67K (+16%), July 72K (+7%), August 69K (-4%), September 78K (+13%), October 82K (+5%), November 88K (+7%), December 94K (+7%). Overall growth of 109% from start to end of year.