accessibility

Why Alt Text Failures Are Still the #1 WCAG Violation in 2025

Missing or inadequate alt text is the most common WCAG failure found on over 80% of homepages. Here is what it means, why it matters legally, and exactly how to fix it on any CMS.

Published June 1, 2025

Understanding Alt Text: The Most Common WCAG Failure

Missing or inadequate alt text remains the single most common automated WCAG failure year after year. According to WebAIM's analysis of the top 1 million websites, over 80% of homepages have alt text errors. This comprehensive guide will explain why alt text matters, how to write effective descriptions, and provide practical strategies for ensuring your images are accessible to everyone.

What Is Alt Text and Why Does It Matter?

The Technical Definition

The alt attribute (alternative text) provides a text alternative for non-text content in HTML. When an image cannot be displayed or when a user is using assistive technology, the alt text is presented instead of the image.

<img src="team-celebration.jpg" alt="Team members celebrating product launch with champagne">

Who Uses Alt Text?

  1. Screen Reader Users: People who are blind or have low vision use screen readers to navigate the web. The screen reader announces the alt text instead of describing the image visually.

  2. Search Engine Bots: Search engines use alt text to understand image content and context, affecting your SEO rankings.

  3. Users with Slow Connections: When images fail to load due to slow internet, the alt text is displayed as a fallback.

  4. Users with Images Disabled: Some users disable images for bandwidth reasons or personal preference, relying on alt text instead.

  5. Cognitive Users: People with cognitive disabilities may benefit from clear, descriptive text that explains image purpose.

The Impact of Missing Alt Text

When alt text is missing or inadequate:

  • Screen reader users hear "image" or the filename (e.g., "IMG_4821.jpg") instead of meaningful content
  • Critical information may be completely inaccessible
  • Context is lost, making content difficult to understand
  • SEO performance suffers
  • Legal compliance is compromised

The Three Types of Images

Understanding image types is crucial for writing appropriate alt text:

1. Informative Images

Images that convey information essential to understanding the content.

Examples:

  • Photographs of people, products, or events
  • Charts, graphs, and infographics
  • Maps and diagrams
  • Screenshots and interface mockups

Alt Text Strategy: Describe the content and purpose concisely but thoroughly.

Good Examples:

  • "Bar chart showing 45% increase in sales from 2023 to 2024"
  • "Map showing store locations in downtown Chicago with accessibility symbols"
  • "Screenshot of the new dashboard interface with navigation menu highlighted"

Bad Examples:

  • "chart.jpg" (filename)
  • "image of a graph" (too vague)
  • A 500-word description (too long)

2. Functional Images

Images that perform an action or link to another resource.

Examples:

  • Buttons and icons (search, menu, download)
  • Navigation arrows and breadcrumbs
  • Social media icons
  • Link images (banners, logos as links)

Alt Text Strategy: Describe the action or destination, not the appearance.

Good Examples:

  • "Search" (for a magnifying glass icon)
  • "Download PDF report" (for a download button)
  • "Visit our Twitter profile" (for Twitter icon)
  • "Go to previous page" (for back arrow)

Bad Examples:

  • "magnifying glass" (describes appearance, not function)
  • "click here" (non-descriptive)
  • "blue button" (irrelevant visual description)

3. Decorative Images

Images that don't add information or serve a functional purpose.

Examples:

  • Background patterns and textures
  • Decorative borders and dividers
  • Stylistic elements that don't convey meaning
  • Brand images that don't provide additional context

Alt Text Strategy: Use empty alt text (alt="") so assistive technology ignores them completely.

Good Examples:

<img src="decorative-border.png" alt="">
<img src="background-pattern.jpg" alt="">

Bad Examples:

  • Leaving out the alt attribute entirely (screen readers announce the filename)
  • Providing decorative descriptions ("pretty border", "nice pattern")

Writing Effective Alt Text: Best Practices

The "Purpose, Not Pixels" Principle

Focus on why the image is there, not what it looks like.

Question to ask: "If this image couldn't be displayed, what information would the user miss?"

Example:

  • Image: A photo of a customer using your product
  • Bad alt: "Smiling woman holding our product"
  • Good alt: "Customer Sarah Johnson demonstrates how to use the XYZ Pro device for small business accounting"

Be Concise but Complete

Aim for:

  • Informative images: 1-2 sentences (up to 125 characters)
  • Complex images: Longer descriptions (consider using longdesc or aria-describedby)
  • Functional images: 1-5 words (action-focused)

Example evolution:

  • Too short: "Chart"
  • Too long: "This is a bar chart that shows our quarterly sales figures for the year 2024, with Q1 at 10%, Q2 at 15%, Q3 at 25%, and Q4 at 50%, demonstrating significant growth"
  • Just right: "Bar chart showing quarterly sales growth: Q1 10%, Q2 15%, Q3 25%, Q4 50%"

Avoid Redundancy

Don't repeat information that's already in the surrounding text.

Example:

<!-- Bad: redundant -->
<h2>Our Product Features</h2>
<img src="features.jpg" alt="Image showing our product features">

<!-- Good: complementary -->
<h2>Our Product Features</h2>
<img src="features.jpg" alt="Screenshot showing the three main product features: automated scanning, real-time reporting, and team collaboration">

Handle Text in Images

When images contain text, include that text in the alt description.

Example:

  • Image: A promotional banner with text "50% Off All Items This Weekend"
  • Alt: "Promotional banner: 50% Off All Items This Weekend"

Better approach: Whenever possible, use actual HTML text instead of text in images for better accessibility and SEO.

Use Proper Grammar and Punctuation

Write alt text as complete thoughts with proper capitalization and punctuation.

Examples:

  • Good: "Team members celebrating product launch with champagne toast"
  • Bad: "team celebrating product launch champagne toast"

Complex Images: Advanced Strategies

Charts and Graphs

For data visualizations, provide:

  1. The type of chart
  2. The main trend or finding
  3. Key data points if relevant
  4. Consider providing the data in an accessible table as well

Example:

<img src="sales-chart.jpg" alt="Bar chart showing 45% increase in sales from 2023 to 2024, with Q1 at $1.2M, Q2 at $1.5M, Q3 at $1.8M, and Q4 at $2.1M">

Maps and Diagrams

For spatial information:

  1. Describe the purpose of the map
  2. Mention key locations or features
  3. Provide text alternatives when possible
  4. Consider simplified versions for complex maps

Example:

<img src="campus-map.jpg" alt="Campus map showing three main buildings: Library in north, Student Center in center, and Dining Hall in south, with wheelchair-accessible routes marked in blue">

Infographics

For complex infographics:

  1. Summarize the main message
  2. Highlight key data points
  3. Consider providing the content in text format
  4. Use longdesc or aria-describedby for detailed descriptions

Example:

<img src="infographic.jpg" alt="Infographic showing the benefits of regular exercise: 30% reduced risk of heart disease, 25% improved mental health, and 20% increased productivity" longdesc="detailed-infographic-description.html">

Alt Text for Different Contexts

E-commerce Product Images

Product Photos:

  • Main image: "Red leather laptop bag, 15-inch, front view"
  • Alternate views: "Red leather laptop bag, side view showing zippered pocket"
  • Lifestyle shots: "Professional carrying red leather laptop bag in modern office setting"

Bad examples:

  • "bag.jpg"
  • "product image"
  • "very nice bag"

Social Media and Profile Images

Profile Photos:

  • User avatars: "Profile photo of John Smith, wearing blue shirt"
  • Company logos as links: "Visit ABC Company homepage"

Hero/Banner Images:

  • Informative: "Team collaboration workshop with diverse participants working on design projects"
  • Decorative: alt=""

Technical Documentation

Screenshots:

  • Interface elements: "Settings panel showing accessibility options with checkboxes for high contrast and screen reader"
  • Code screenshots: "Code example showing how to implement the alt attribute in HTML"
  • Error messages: "Error dialog showing 'File not found' message with retry button"

CMS-Specific Guidelines

WordPress

Automated Alt Text:

  • Many themes add alt text automatically from image titles
  • Review and edit this auto-generated text
  • Disable auto-generation if it produces poor results

Manual Addition:

  1. Upload image to media library
  2. Fill in "Alternative Text" field
  3. Use descriptive, purpose-focused text
  4. Save and insert into content

Common WordPress Mistakes:

  • Leaving alt text blank
  • Using filenames as alt text
  • Copying image titles to alt text
  • Using the same alt text for all images

Shopify

Product Images:

  • Add alt text in product image settings
  • Focus on product details and purpose
  • Include color, size, and key features
  • Update alt text when product changes

Theme Images:

  • Check theme settings for alt text fields
  • Customize banner and hero image descriptions
  • Ensure logo has appropriate alt text

Custom CMS

Best Practices:

  • Make alt text a required field for images
  • Provide character limits (125-150 characters)
  • Include tooltips or examples for guidance
  • Implement alt text validation
  • Create style guides for content authors

Testing and Quality Assurance

Automated Testing

Tools:

  • AuditBloc WCAG checker (/tools/wcag-checker)
  • axe DevTools browser extension
  • WAVE browser extension
  • Lighthouse accessibility audit

What They Catch:

  • Missing alt attributes
  • Empty alt text on informative images
  • Suspiciously short alt text
  • File names used as alt text

What They Miss:

  • Whether alt text is actually meaningful
  • Context appropriateness
  • Quality of descriptions
  • Functional vs. decorative distinctions

Manual Testing

Screen Reader Testing:

  1. Navigate your site with NVDA (Windows), VoiceOver (Mac), or TalkBack (Android)
  2. Listen to how images are announced
  3. Check if descriptions provide necessary information
  4. Verify that decorative images are properly hidden

Visual Testing:

  1. Disable images in your browser
  2. Check if alt text provides sufficient context
  3. Verify that the page remains understandable
  4. Test with different screen sizes and devices

User Testing

Include Users with Disabilities:

  • Recruit screen reader users for testing
  • Get feedback on alt text quality
  • Ask if descriptions are helpful
  • Test with users who have different types of visual impairments

Common Alt Text Mistakes

1. The Filename Trap

Problem: Using filenames like "IMG_4821.jpg" or "banner-final.png" as alt text.

Solution: Always write descriptive, purpose-focused alt text regardless of filename.

2. The "Image of" Prefix

Problem: Starting every description with "Image of..." or "Picture of..."

Solution: Screen readers already announce "image," so this is redundant. Start directly with the description.

3. The SEO Stuffing Problem

Problem: Overloading alt text with keywords for SEO purposes.

Solution: Write natural, helpful descriptions first. Good accessibility often improves SEO anyway.

4. The One-Size-Fits-All Approach

Problem: Using the same alt text template for all images.

Solution: Customize alt text for each image's specific context and purpose.

5. The Decorative Confusion

Problem: Either leaving alt attributes completely empty (bad) or using alt="" incorrectly.

Solution: Use alt="" only for truly decorative images. Never omit the alt attribute entirely.

Legal and Compliance Implications

ADA and Alt Text

Alt text failures are among the most common issues in ADA lawsuits:

  • Easy to prove with automated tools
  • Clear accessibility impact
  • Straightforward to fix
  • Often part of pattern lawsuits against multiple pages

European Accessibility Act

The EAA specifically requires alternatives for non-text content, with alt text being the primary solution for images.

SEO Benefits

Proper alt text improves:

  • Image search rankings
  • Overall SEO performance
  • User experience for all visitors
  • Content discoverability

Implementing an Alt Text Strategy

For Content Teams

Create Guidelines:

  • Document alt text standards
  • Provide examples for different image types
  • Establish review processes
  • Train content authors and editors

Workflow Integration:

  • Make alt text required in CMS
  • Add alt text to content checklists
  • Include in QA processes
  • Schedule regular audits

For Development Teams

Automated Checks:

  • Add alt text validation to build processes
  • Implement automated testing in CI/CD
  • Set up monitoring for new content
  • Create alerts for common mistakes

Component Libraries:

  • Design components with alt text in mind
  • Create accessible image components
  • Document alt text requirements
  • Provide validation in design systems

For Design Teams

Design Considerations:

  • Plan for alternative text in wireframes
  • Consider text alternatives for complex graphics
  • Design with accessibility in mind
  • Test designs with screen readers early

Advanced Topics

SVG Images

SVGs can include accessible text in multiple ways:

<!-- Method 1: aria-label -->
<svg aria-label="Description of SVG content" role="img">
  <!-- SVG content -->
</svg>

<!-- Method 2: Hidden text -->
<svg role="img">
  <title>Description of SVG content</title>
  <!-- SVG content -->
</svg>

Icon Fonts

Icon fonts present special challenges:

  • Ensure icons have text alternatives
  • Use aria-hidden for decorative icons
  • Provide screen reader-only text when needed
  • Consider using inline SVGs instead

Lazy-Loaded Images

For lazy-loaded images:

  • Include alt text in the img tag from the start
  • Ensure alt text is present before the image loads
  • Test with screen readers to verify timing
  • Consider pre-loading critical images

Ongoing Maintenance

Regular Audits

Schedule periodic reviews:

  • Monthly: Automated scans for new content
  • Quarterly: Manual review of key pages
  • Annually: Comprehensive accessibility audit
  • As needed: Content-specific reviews

Content Updates

When updating content:

  • Review alt text for changed images
  • Update descriptions for modified graphics
  • Remove alt text for deleted images
  • Add alt text for new images

Training and Education

Keep your team informed:

  • Regular accessibility training
  • Share best practices and examples
  • Discuss common mistakes
  • Celebrate accessibility improvements

Conclusion

Alt text is fundamental to web accessibility, yet it remains one of the most common WCAG failures. By understanding the different types of images, writing purpose-focused descriptions, and implementing systematic testing and maintenance processes, you can ensure your images are accessible to everyone.

Remember that good alt text benefits all users, not just those using assistive technology. It improves SEO, enhances user experience, and demonstrates your commitment to inclusivity.

Next Steps:

  1. Run AuditBloc's WCAG checker to identify current alt text issues
  2. Create alt text guidelines for your content team
  3. Implement alt text validation in your CMS
  4. Train content authors on best practices
  5. Establish regular testing and maintenance processes

Accessibility isn't just about compliance—it's about ensuring your content is available to everyone who needs it. Good alt text is a fundamental part of that commitment.