WCAG 1.1.1 Non-Text Content: Complete Alt Text Implementation Guide

WCAG success criteriaaccessibility requirementsWCAG conformanceBrowseCheck
·6 min read

WCAG Success Criterion 1.1.1 Non-Text Content is one of the most fundamental accessibility requirements—yet one of the most commonly violated. This Level A criterion requires providing text alternatives for all non-text content so screen reader users can understand images, graphics, and other visual elements.

What is WCAG 1.1.1?

Official wording: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."

Applies to:

  • Images
  • Graphics
  • Charts and graphs
  • Icons
  • Form input images (buttons, CAPTCHAs)
  • Image maps
  • Embedded objects (audio, video placeholders)

Why 1.1.1 Matters

26% of U.S. adults have visual disabilities

80% of ADA lawsuits cite missing or poor alt text

Screen readers: Convert images to speech via alt text

No alt text: Image announced as "Image" or filename

Good alt text: Conveys meaning equivalently

Types of Images

1. Informative Images

Convey information needed to understand content.

Example: Product photo, diagram, infographic

Alt text: Describe the information conveyed

<img src="sales-chart.png" alt="Bar chart showing 40% increase in sales from 2023 to 2024">

2. Decorative Images

Purely visual, no information value.

Example: Dividers, background patterns, purely aesthetic images

Alt text: Empty alt attribute

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

Why empty: Tells screen readers to skip image.

Never omit alt attribute entirely—use empty string alt="" for decorative images.

3. Functional Images

Images that perform functions (buttons, links).

Example: Search icon button, social media icons

Alt text: Describe the action/destination

<button>
  <img src="search-icon.svg" alt="Search">
</button>

<a href="https://twitter.com/company">
  <img src="twitter-icon.svg" alt="Follow us on Twitter">
</a>

4. Complex Images

Charts, graphs, diagrams requiring detailed explanation.

Alt text: Brief description + link to longer description

<img
  src="financial-report-chart.png"
  alt="Financial performance chart showing revenue and expenses"
  longdesc="financial-chart-description.html"
>

<!-- Or use aria-describedby -->
<img
  src="chart.png"
  alt="Q1 2024 Revenue by Region"
  aria-describedby="chart-desc"
>
<div id="chart-desc">
  <p>Detailed description: The chart shows revenue across four regions.
  North America: $2.5M, Europe: $1.8M, Asia: $1.2M, Other: $0.5M.</p>
</div>

5. Text in Images

Avoid images of text when possible.

If unavoidable:

<img src="logo-text.png" alt="BrowseCheck: Website Accessibility Monitoring">

Better: Use web fonts with actual text.

Writing Good Alt Text

Do's

Be concise: Aim for 125 characters or less (screen reader limit)

Be specific: "Golden retriever puppy" not "dog"

Describe purpose: For functional images, describe action

Include text: If image contains text, include it in alt

Context matters: Alt text should fit surrounding content

Don'ts

Don't say "image of": Screen readers announce it's an image

Don't be redundant: If caption says same thing, alt can be shorter

Don't over-describe: Essential information only

Don't use filenames: "IMG_1234.jpg" is useless

Don't leave empty for informative images: Fails WCAG

Examples: Good vs. Bad

Product Image

❌ alt="Image" ❌ alt="Product" ❌ alt="product-photo-1234.jpg" ✅ alt="Nike Air Max 270 running shoes in blue and white"

Chart

❌ alt="Chart" ❌ alt="" ✅ alt="Pie chart showing 60% mobile, 30% desktop, 10% tablet traffic"

Decorative

❌ alt="Decorative image" ❌ No alt attribute ✅ alt=""

Logo

❌ alt="Logo" ✅ alt="BrowseCheck" (company name)

Social Icon

❌ alt="Twitter" ✅ alt="Follow us on Twitter" (describes action)

Implementation Techniques

HTML img Element

<img src="photo.jpg" alt="Description">

CSS Background Images

Problem: Can't add alt text to CSS backgrounds

Solution:

  • If decorative: No alt needed
  • If informative: Use <img> instead, or provide text alternative
<!-- Bad: Informative image as background -->
<div style="background-image: url(chart.png)"></div>

<!-- Good: Use img -->
<img src="chart.png" alt="Sales chart">

SVG Images

Inline SVG:

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Monthly Sales Chart</title>
  <!-- SVG content -->
</svg>

SVG as img:

<img src="icon.svg" alt="Download">

Icon Fonts

<button>
  <span class="icon-search" aria-hidden="true"></span>
  <span class="visually-hidden">Search</span>
</button>

Or:

<button aria-label="Search">
  <span class="icon-search" aria-hidden="true"></span>
</button>

Context-Dependent Alt Text

Same image, different contexts:

Blog post: alt="Smartphone displaying BrowseCheck dashboard"

Link to product: alt="View BrowseCheck accessibility monitoring tool"

Decorative in sidebar: alt=""

CAPTCHAs

Problem: Image CAPTCHAs are barriers

Solutions:

  1. reCAPTCHA v3 (invisible)
  2. Audio alternative
  3. Text-based challenge
  4. Honeypot fields

If using image CAPTCHA:

<img src="captcha.png" alt="CAPTCHA: Enter the characters shown">

Always provide audio alternative.

Testing Alt Text

Automated Tools

Tools like axe DevTools, WAVE detect:

  • Missing alt attributes
  • Empty alt on non-decorative images (sometimes)

Can't detect: Whether alt text is meaningful.

Manual Testing

Turn off images: Do alt texts convey information?

Screen reader: Listen to page with NVDA or VoiceOver

Context review: Does alt fit surrounding content?

Common Mistakes

Mistake 1: No alt attribute

<!-- ❌ Fails WCAG -->
<img src="photo.jpg">

Mistake 2: Redundant "image of"

<!-- ❌ Redundant -->
<img src="cat.jpg" alt="Image of a cat">

<!-- ✅ Better -->
<img src="cat.jpg" alt="Orange tabby cat sleeping">

Mistake 3: Generic alt text

<!-- ❌ Not helpful -->
<img src="chart.png" alt="Chart">

<!-- ✅ Descriptive -->
<img src="chart.png" alt="Revenue growth chart showing 30% increase year-over-year">

Mistake 4: Filename as alt

<!-- ❌ Useless -->
<img src="IMG_1234.jpg" alt="IMG_1234.jpg">

Mistake 5: Decorative images with alt text

<!-- ❌ Adds noise -->
<img src="border.png" alt="Decorative border">

<!-- ✅ Skip decorative -->
<img src="border.png" alt="">

Checking Compliance

Automated:

  • axe DevTools: Checks alt presence
  • WAVE: Shows alt text content
  • BrowseCheck: Monitors alt text issues

Manual:

  • Screen reader testing
  • Image evaluation for appropriateness
  • Context review

Checklist

  • [ ] All images have alt attribute (even if empty)
  • [ ] Informative images have descriptive alt text
  • [ ] Decorative images have empty alt (alt="")
  • [ ] Functional images describe action/destination
  • [ ] Complex images have detailed descriptions
  • [ ] Alt text is concise (≤125 characters when possible)
  • [ ] Alt text doesn't include "image of" or "picture of"
  • [ ] Alt text fits surrounding context
  • [ ] CAPTCHAs have alternatives
  • [ ] Tested with screen reader

Conclusion

WCAG 1.1.1 Non-Text Content requires text alternatives for all images and non-text content. Write concise, descriptive alt text for informative images, use empty alt for decorative images, and describe actions for functional images.

Alt text isn't just compliance—it's ensuring blind and visually impaired users understand your visual content. Tools like BrowseCheck help monitor alt text issues across your site, but manual review ensures alt text quality and appropriateness.

Good alt text benefits everyone: improves SEO, helps users on slow connections, and provides context when images don't load.

← Back to blog