WCAG 2.1 (Web Content Accessibility Guidelines) is the international standard for web accessibility, and it's the benchmark referenced by laws worldwide — from the ADA in the US to the EAA in Europe. Success Criterion 1.1.1 specifically addresses image alt text. This guide breaks down the technical requirements in detail.
Table of Contents
1. Success Criterion 1.1.1: Non-text Content
WCAG 2.1 Success Criterion 1.1.1 is a Level A requirement (the minimum level), meaning it's non-negotiable for any level of WCAG compliance. The criterion states:
"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for [specific situations listed below]."
The key phrase is "serves the equivalent purpose." The alt text doesn't need to describe every visual detail — it needs to convey the same information or function that the image provides to sighted users. A sighted user looking at a product photo learns what the product looks like. A screen reader user reading the alt text should learn the same thing.
2. The Alt Text Decision Tree
Not all images are treated the same way under WCAG. Use this decision tree to determine the correct approach:
Step 1: Does the image contain text? → If yes, see "Images of Text" section
Step 2: Is the image purely decorative? → If yes, use alt=""
Step 3: Is the image a link or button? → If yes, alt text describes the destination/action
Step 4: Is the image complex (chart, graph, diagram)? → If yes, provide extended description
Step 5: It's an informative image → Write descriptive alt text (80-150 characters)
3. Informative Images
Informative images convey content that supplements the surrounding text. This is the most common category and includes: product photos, blog illustrations, team photos, screenshots, and any image that adds meaning to the page.
The alt text should describe the content and function of the image concisely. Include relevant details like colors, objects, actions, and context. For product images, include brand name, product name, key features, and viewing angle.
✅ Good informative alt text:
alt="Golden retriever puppy playing with red ball in sunny backyard"
alt="Bar chart showing Q3 revenue growth of 23% year-over-year"
alt="SightSEO WordPress plugin settings page with license key field highlighted"
4. Decorative Images
Decorative images don't add information — they exist only for visual aesthetics. Examples include: background patterns, divider lines, ornamental graphics, and images that are fully described in adjacent text.
For decorative images, use empty alt text: alt="". This tells screen readers to skip the image entirely. Do NOT omit the alt attribute altogether — a missing alt attribute is different from an empty one, and screen readers may read the filename instead.
✅ Correct: <img src="divider.svg" alt="">
❌ Wrong: <img src="divider.svg"> (missing alt attribute entirely)
❌ Wrong: <img src="divider.svg" alt="decorative divider"> (describing decoration adds noise)
5. Functional Images
Functional images are used as links, buttons, or interactive controls. For these, the alt text should describe the function (what happens when you click), not the appearance.
Search icon button:
❌ alt="magnifying glass" (describes appearance)
✅ alt="Search" (describes function)
Logo link:
❌ alt="logo"
✅ alt="SightSEO home"
Social media icon:
❌ alt="blue bird"
✅ alt="Follow us on Twitter"
6. Complex Images (Charts, Graphs, Diagrams)
Complex images convey detailed data or relationships that can't be captured in a short alt text. WCAG allows two approaches:
Short alt text + long description: Provide a brief summary in the alt attribute, then a detailed description nearby (using figcaption, an adjacent paragraph, or a link to a full description).
<figure>
<img src="revenue-chart.png" alt="Revenue chart showing 23% growth. Full data in table below.">
<figcaption>Figure 1: Q1-Q4 2024 Revenue by region...</figcaption>
</figure>
7. Images of Text
WCAG 2.1 Level AA (SC 1.4.5) says that if the same visual presentation can be achieved with real text, you should use text instead of an image. When images of text are necessary (such as logos), the alt text should contain the same text that appears in the image.
8. Testing & Validation
Use these tools to verify your WCAG compliance for images:
- WAVE (webaim.org/wave) — Highlights all images with missing or suspicious alt text
- axe DevTools — Automated WCAG testing in Chrome
- NVDA or VoiceOver — Test with an actual screen reader to hear how your alt text sounds
- Lighthouse — Built into Chrome DevTools, includes WCAG accessibility audit
The fastest path to WCAG compliance for images: Install SightSEO, run Bulk Generate on your entire media library, then spot-check the results. Every generated alt text follows WCAG 2.1 AA guidelines automatically.
Start optimizing your images today
25 free credits. No credit card required.