WCAG 1.1.1 Non-text Content: How to Fix Alt Text Issues

What This Criterion Requires

WCAG 1.1.1 requires that all non-text content presented to the user has a text alternative that serves the equivalent purpose. This includes images, icons, charts, graphs, audio, video, animations, CAPTCHA, and purely decorative elements. Text alternatives make visual information accessible to people who are blind or have low vision and use screen readers. They also benefit users on slow connections, those who have images disabled, and search engines indexing your content. Every meaningful image must have descriptive alt text, while decorative images should be hidden from assistive technology using empty alt attributes or CSS background images. Form image buttons, image maps, and complex infographics each require specific approaches to providing adequate text alternatives.

Why It Matters

Non-text content is one of the most fundamental accessibility requirements because it directly determines whether people who cannot see visual content can understand your website. Screen reader users rely entirely on text alternatives to understand images, icons, and multimedia content. Without proper alt text, a screen reader might announce a meaningless filename like 'IMG_2847.jpg' or skip the content entirely, leaving users confused about what they are missing. This criterion also impacts users with cognitive disabilities who benefit from text descriptions, users on low-bandwidth connections who may not load images, and anyone using text-only browsers. Furthermore, proper alt text significantly improves SEO performance, as search engines cannot interpret images without text descriptions. Failing this criterion is the single most common accessibility violation found across the web.

Common Failures and How to Fix Them

<img src="/images/company-revenue-chart-2025.png">

<img src="/images/company-revenue-chart-2025.png" alt="Company revenue chart showing 40% growth from Q1 to Q4 2025, reaching $2.4M">

<img src="/images/decorative-divider.svg" alt="A wavy blue line divider decoration">

<img src="/images/decorative-divider.svg" alt="">

<button>
  <svg viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
</button>

<button aria-label="Open navigation menu">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
</button>

How to Test

1. Run an automated scanner (axe DevTools, WAVE, or Lighthouse) to identify images missing alt attributes.
2. Disable images in the browser or use a screen reader to navigate the page; verify that every meaningful image has a text alternative that conveys the same information.
3. Check that decorative images use alt="" or are implemented as CSS backgrounds so they are ignored by assistive technology.
4. Inspect icon-only buttons and links to ensure they have accessible names via aria-label, aria-labelledby, or visually hidden text.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist

Further Reading

• Alt Text Guide
• Five Minute Accessibility Audit
• Accessibility Seo Benefits

Related WCAG Criteria

• WCAG 1.3.1
• WCAG 4.1.2