Alt Text: Why Image Descriptions Matter for Accessibility and SEO

Introduction

Alt text (alternative text) provides a text description of images for users who cannot see them. This includes people using screen readers, those with images disabled, and search engine crawlers. WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) is a Level A requirement—the most fundamental accessibility standard.

Writing effective alt text is both an art and a science. It requires understanding the image’s purpose in context and communicating that purpose concisely to users who can’t see it.

What Is Alt Text?

The HTML Attribute

Alt text is added to images using the alt attribute:

<img src="chart.png" alt="Bar chart showing 40% increase in sales Q3 2024">

Types of Images and Their Alt Text

Image Type	Alt Text Approach	Example
Informative	Describe content and meaning	“Red warning icon”
Functional	Describe the action/destination	“Submit form”
Decorative	Use empty alt (alt=“”)	Background patterns
Complex	Brief alt + longer description	Charts, diagrams
Text in images	Include all visible text	Logos, banners

Why Alt Text Matters

Who Benefits

1. Screen reader users - Primary consumers of alt text
2. Users with slow connections - See description before image loads
3. Search engines - Understand image content for indexing
4. Users with images disabled - Still get content meaning

SEO Benefits

Alt Text SEO Impact:
┌─────────────────────────────────────────────────────────┐
│ Image Search Rankings → Better alt text = more traffic │
│ Page Context → Helps Google understand page content    │
│ Crawl Efficiency → Text is faster to process          │
│ Accessibility Score → Affects Core Web Vitals         │
└─────────────────────────────────────────────────────────┘

Legal Compliance

Alt text is required under:

• WCAG 2.2 Level A (Success Criterion 1.1.1)
• ADA (Americans with Disabilities Act)
• Section 508 (US Federal requirements)
• EN 301 549 (European accessibility standard)

Common Alt Text Mistakes

1. Missing Alt Attributes

<!-- BAD: No alt attribute -->
<img src="product.jpg">

<!-- GOOD: Descriptive alt text -->
<img src="product.jpg" alt="Blue wireless headphones with noise cancellation">

2. Redundant Descriptions

<!-- BAD: Redundant "image of" -->
<img src="team.jpg" alt="Image of our team at the office">

<!-- GOOD: Direct description -->
<img src="team.jpg" alt="Our team collaborating around a whiteboard">

3. Keyword Stuffing

<!-- BAD: SEO spam -->
<img src="shoes.jpg" alt="Buy shoes online best shoes cheap shoes sale shoes">

<!-- GOOD: Natural description -->
<img src="shoes.jpg" alt="Men's black leather oxford dress shoes">

4. Generic Descriptions

<!-- BAD: Not helpful -->
<img src="data.png" alt="Chart">

<!-- GOOD: Conveys the data -->
<img src="data.png" alt="Line chart showing user growth from 10K to 50K over 12 months">

5. Decorative Images Without Empty Alt

<!-- BAD: Decorative image with description -->
<img src="divider.png" alt="Decorative line divider">

<!-- GOOD: Empty alt for decorative images -->
<img src="divider.png" alt="">

Writing Good Alt Text

The Decision Tree

Ask yourself:
│
├─ Is this image purely decorative?
│  └─ YES → Use alt=""
│
├─ Does the image contain text?
│  └─ YES → Include all text in alt
│
├─ Is the image a link or button?
│  └─ YES → Describe destination/action
│
├─ Does surrounding text describe the image?
│  └─ YES → Use brief alt or alt=""
│
└─ Otherwise → Describe content and purpose

Good Alt Text Principles

1. Be concise - Usually 125 characters or less
2. Be specific - Include relevant details
3. Convey purpose - Why is this image here?
4. Don’t start with “Image of…” - Screen readers announce images
5. Consider context - Same image may need different alt text in different places

Examples by Context

E-commerce Product:

<img src="jacket.jpg" alt="Women's waterproof hiking jacket in forest green, sizes XS-XL">

News Article:

<img src="protest.jpg" alt="Thousands of protesters gathered in downtown plaza holding climate action signs">

Tutorial Step:

<img src="step3.png" alt="Click the blue 'Save' button in the top right corner">

Company Logo:

<img src="logo.png" alt="Acme Corporation">

Testing Alt Text

Screen Reader Testing

Test with actual screen readers:

• VoiceOver (macOS/iOS)
• NVDA (Windows, free)
• JAWS (Windows)

Automated Tools

Tool	What It Checks
axe DevTools	Missing alt, empty alt on functional images
WAVE	Alt text presence and quality hints
Lighthouse	Image accessibility in audits

Quick Manual Test

1. Disable images in your browser
2. Can you understand the page content?
3. Does each image’s description make sense?

Quick Reference

Do’s and Don’ts

Do	Don’t
Describe the image’s purpose	Start with “Image of…”
Be concise but complete	Keyword stuff
Use empty alt for decorative images	Leave alt attribute missing
Include text that appears in images	Use generic “photo” or “image”
Test with screen readers	Assume your alt text is good enough

Related Articles

• Alt Text Implementation Guide - Detailed techniques
• WCAG Compliance Hub - Full accessibility guide
• Image SEO Explained - Images for search optimization

---

References

1. W3C - WCAG 2.2 SC 1.1.1 Non-text Content
2. W3C - WAI Images Tutorial
3. WebAIM - Alternative Text
4. MDN - Images in HTML