WCAG 2.1 AA Alt Text: The Definitive Guide

What Makes Alt Text WCAG Compliant?

The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA represent the international standard for web accessibility. When web auditors evaluate accessibility compliance, alternative text (alt text) is consistently one of the first areas examined.

Under WCAG 2.1, two core Success Criteria govern images:

• 1.1.1 Non-Text Content (Level A): All non-text content presented to the user has a text alternative that serves the equivalent purpose.
• 1.4.5 Images of Text (Level AA): If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.

Understanding how to write accurate, concise, and compliant alt text is essential for web developers, UX designers, and digital marketers alike.

The 5 Categories of Images and How to Label Them

WCAG guidance specifies that the correct approach to alt text depends entirely on the functional purpose of the image in its page context:

1. Informative Images

Visual assets that convey distinct information, such as photos, illustrations, or graphics.

• Rule: Describe the essential content and visual details succinctly.
• Example:
  txt

  <!-- ✅ Correct -->
  <img src="golden-retriever.jpg" alt="Golden retriever puppy sitting in green grass holding a yellow tennis ball">
  
  <!-- ❌ Incorrect -->
  <img src="golden-retriever.jpg" alt="dog">
  

2. Decorative Images

Graphics that provide visual styling but contain no unique or informative content (e.g., background flourishes, geometric dividers, decorative hero accents).

• Rule: Include an empty alt attribute (alt="") or specify role="presentation" so screen readers skip the element.
• Example:
  txt

  <!-- ✅ Correct -->
  <img src="decorative-wave.svg" alt="" role="presentation">
  
  <!-- ❌ Incorrect: Screen readers will read the file name aloud! -->
  <img src="decorative-wave.svg">
  

3. Functional Images

Images used inside interactive elements such as clickable links, action buttons, or form controls.

• Rule: Describe the action or destination, not the visual appearance of the icon.
• Example:
  txt

  <!-- ✅ Correct -->
  <a href="/cart">
    <img src="shopping-bag.svg" alt="View Shopping Cart">
  </a>
  
  <!-- ❌ Incorrect -->
  <a href="/cart">
    <img src="shopping-bag.svg" alt="Black shopping bag icon">
  </a>
  

4. Complex Data Images

Charts, graphs, infographics, and architectural diagrams that contain detailed numerical or conceptual data.

• Rule: Provide a short overall summary in the alt tag, and refer to a detailed text breakdown in surrounding HTML or an aria-describedby container.
• Example:
  txt

  <!-- ✅ Correct -->
  <img src="q3-revenue.png" alt="Bar chart showing Q3 revenue growth up 24% year-over-year. Detailed data listed in table below." aria-describedby="revenue-table">
  

5. Images of Text

Raster graphics displaying styled text strings (e.g., banner text or logo typography).

• Rule: Unless strictly necessary (like brand logos), avoid images of text. If used, the alt text must contain the exact words shown in the image.

Technical Standards for Accessible Alt Text

Screen reader software (such as NVDA, JAWS, and macOS VoiceOver) handles alt text according to specific technical behaviors:

• Optimal Character Count (80–125 Characters): Most screen readers break long text strings into ~125-character chunks. Keeping alt text concise ensures smooth reading flow.
• Avoid Redundant Phrases: Never start alt text with "Image of..." or "Photo showing...". Screen readers automatically announce the element as an image before reading the alt attribute.
• Capitalization and Punctuation: End your alt text with a period. This forces screen readers to pause briefly before reading the next DOM node, improving auditory comprehension.
• No Keyword Stuffing: Repeating search terms (alt="best cheap shoes buy shoes sale") violates WCAG 1.1.1 and damages accessibility.

10 Common Alt Text Pitfalls to Avoid

1. Omitting alt attributes completely (causes screen readers to read full image URLs).
2. Duplicating adjacent caption text verbatim in the alt tag.
3. Using generic filenames like DCIM_0091.jpg as fallback text.
4. Writing novel-length paragraphs inside an alt tag.
5. Leaving decorative elements unflagged without alt="".
6. Ignoring image localization for internationalized sites.
7. Embedding crucial product prices or discounts inside images without text equivalents.
8. Relying on automatic browser OCR which often fails on stylized fonts.
9. Forgetting to update alt attributes when swapping image assets in CMS platforms.
10. Using technical jargon that screen reader users cannot understand.

Automating WCAG Compliance with AlTextAPI

Writing WCAG-compliant alt text across thousands of site assets by hand is slow and costly. AlTextAPI automates WCAG 2.1 AA image description generation using vision AI trained specifically on W3C accessibility guidelines.

Integration Options

Option A: JavaScript Auto-Fill Widget

Add one line of JavaScript to your site templates to automatically evaluate and fill missing alt attributes:

<script
  src="https://altextapi.com/widget.js"
  data-api-key="alt_YOUR_API_KEY"
  data-auto="true"
></script>

Option B: REST API for Automated Pipelines

Integrate directly into your build script or CMS workflow:

curl -X POST https://api.altextapi.com/api/alt-text \
  -H "Content-Type: application/json" \
  -H "X-API-Key: alt_YOUR_API_KEY" \
  -d '{
    "image_url": "https://example.com/images/nature.jpg",
    "language": "en"
  }'

Guarantee Accessibility Across Your Entire Site

Achieving WCAG 2.1 AA compliance doesn't have to take months of manual effort.

Sign up for AlTextAPI and process up to 50 images per month completely free →