Alt Text Guide: Writing Effective Image Descriptions for WCAG Compliance

Alt text (alternative text) is the most fundamental image accessibility requirement—and the most frequently failed. Missing or inadequate alt text represents the single most common WCAG violation, appearing on 58% of home pages according to the WebAIM Million. For e-commerce sites, poor alt text means blind users can't identify products, compare options, or make informed purchases.

WCAG 1.1.1 requires text alternatives for all non-text content, but the requirement isn't simply "add alt text to every image." The right alt text depends on image context, purpose, and function—and sometimes the correct alt text is empty.

Q: What makes alt text WCAG compliant?

A: WCAG-compliant alt text conveys the same information or function as the image. Decorative images need empty alt (alt=""). Informative images need descriptive text. Functional images need text describing the function. Context determines correct implementation.

Why Alt Text Matters

Who Uses Alt Text

Screen reader users: When encountering images, screen readers announce alt text. Without it, they may announce the filename ("DSC_0234.jpg") or nothing at all—leaving users with no information.

Users with images disabled: Slow connections, data saving modes, or browser extensions may disable images. Alt text provides context.

Search engines: While not an accessibility concern, alt text helps search engines understand image content—SEO benefit alongside accessibility.

Users with cognitive disabilities: Alt text can appear when hovering, providing additional context for users who benefit from text explanations.

Legal Requirements

WCAG 2.1 AA Success Criterion 1.1.1 requires text alternatives for non-text content. This is Level A—the most basic requirement level. Failure here fails any WCAG audit.

For ADA compliance, missing alt text is frequently cited in demand letters and lawsuits. It's easily detectable, objectively measurable, and affects core content access.

Types of Images and Their Alt Text

Informative Images

Purpose: Convey information essential to understanding content

Alt text approach: Describe the information the image conveys

Example:

<!-- Product image -->
<img src="blue-running-shoes.jpg"
     alt="Nike Air Max 90 in navy blue with white sole and red accent">

<!-- Chart/graph -->
<img src="sales-chart.jpg"
     alt="Bar chart showing Q1 sales at $1.2M, Q2 at $1.5M,
          Q3 at $1.1M, and Q4 at $1.8M">

<!-- Photograph with relevant information -->
<img src="team-photo.jpg"
     alt="Company leadership team of 8 people standing in front
          of headquarters building">

Decorative Images

Purpose: Visual enhancement with no informational value

Alt text approach: Empty alt attribute (alt="")—not missing, explicitly empty

Example:

<!-- Background pattern -->
<img src="pattern.png" alt="">

<!-- Decorative divider -->
<img src="divider-flourish.svg" alt="">

<!-- Mood imagery alongside text that provides the information -->
<img src="abstract-tech.jpg" alt="">

Important: Omitting the alt attribute entirely is different from alt="". Missing alt causes screen readers to announce the filename. Empty alt correctly signals "skip this image."

Functional Images

Purpose: Perform an action (links, buttons)

Alt text approach: Describe the function, not the image

Example:

<!-- Search button with magnifying glass icon -->
<button>
  <img src="magnifier.svg" alt="Search">
</button>

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

<!-- Home link with logo -->
<a href="/">
  <img src="logo.svg" alt="Company Name homepage">
</a>

Complex Images

Purpose: Convey information too detailed for brief alt text (charts, diagrams, infographics)

Alt text approach: Brief alt text plus extended description via aria-describedby or linked text

Example:

<!-- Complex chart with extended description -->
<figure>
  <img src="market-analysis.png"
       alt="Market share comparison chart"
       aria-describedby="chart-desc">
  <figcaption id="chart-desc">
    Pie chart showing market share: Company A leads at 35%,
    followed by Company B at 28%, Company C at 22%, and
    others at 15%. Year-over-year, Company A gained 5 points
    while Company B declined 3 points.
  </figcaption>
</figure>

<!-- Or link to detailed description -->
<img src="infographic.png"
     alt="Annual report infographic - full description below">
<a href="#infographic-description">Full infographic description</a>

Images of Text

Purpose: Text rendered as image

Alt text approach: Include the exact text shown in the image

Example:

<!-- Quote as image -->
<img src="quote-banner.jpg"
     alt="Innovation distinguishes between a leader and a follower.
          - Steve Jobs">

<!-- Logo with text -->
<img src="acme-logo.png" alt="ACME Corporation">

Best practice: Avoid images of text when possible. Use actual text with CSS styling instead. Images of text fail users who need to resize text or adjust colors.

E-Commerce Alt Text

Product Images

Product images are critical for e-commerce accessibility. Blind users rely entirely on alt text to understand what they're considering purchasing.

Include:

• Product name
• Color
• Key distinguishing features
• Style/variation
• Material if relevant

Example:

<!-- Good: Descriptive and specific -->
<img src="dress-front.jpg"
     alt="Floral A-line midi dress in red and white pattern,
          V-neck with short flutter sleeves">

<img src="dress-back.jpg"
     alt="Back view of floral midi dress showing concealed zipper
          and tie waist detail">

<!-- Bad: Generic or missing key details -->
<img src="dress-front.jpg" alt="Dress">
<img src="dress-front.jpg" alt="Product image">
<img src="dress-front.jpg" alt="IMG_1234.jpg">

Product Galleries

For multiple images of the same product:

<!-- First image: Full description -->
<img src="shoe-main.jpg"
     alt="Nike Air Force 1 Low in white leather with classic
          silhouette and Air cushioning">

<!-- Subsequent images: Describe what's different -->
<img src="shoe-side.jpg" alt="Side profile showing perforated
     toe box and Nike swoosh">

<img src="shoe-sole.jpg" alt="Bottom view showing pivot circle
     tread pattern on white rubber sole">

<img src="shoe-detail.jpg" alt="Close-up of heel tab showing
     Nike branding and Air Force 1 text">

Category and Collection Images

<!-- Category banner -->
<img src="summer-collection.jpg"
     alt="Summer Collection: Models wearing bright colored
          dresses and accessories on beach setting">

<!-- Collection thumbnail -->
<img src="new-arrivals.jpg"
     alt="New Arrivals featuring structured blazer in camel,
          white silk blouse, and high-waisted trousers">

User-Generated Content

For customer photos and reviews:

<!-- Customer review photo -->
<img src="customer-photo-123.jpg"
     alt="Customer photo: Product in use showing fit on
          medium build individual">

<!-- Or when content is unknown -->
<img src="customer-photo-123.jpg"
     alt="Customer submitted photo of product">

Writing Effective Alt Text

Do's

Be concise but complete: Aim for under 125 characters when possible. Screen reader users can interrupt, but long descriptions slow navigation.

Be specific: "Red Nike running shoes" is better than "shoes."

Consider context: Alt text for the same image may differ based on surrounding content and purpose.

Front-load important information: Put the most critical details first.

Describe function for functional images: "Search" not "magnifying glass icon."

Don'ts

Don't start with "image of" or "picture of": Screen readers already announce "image" or "graphic."

Don't repeat surrounding text: If a caption says "CEO Jane Smith," the image doesn't need to repeat "Jane Smith, CEO."

Don't include "click here" for linked images: The link context is already announced.

Don't use filenames: "IMG_0234.jpg" provides no useful information.

Don't leave alt empty for informative images: Decorative images get empty alt; informative ones need descriptions.

Don't describe purely decorative elements: An image of abstract shapes serving no informational purpose gets alt="".

Alt Text Formulas

Product images: [Product name] in [color/pattern], [key features]

People images: [Who] [doing what] [where/context if relevant]

Chart/data images: [Chart type] showing [what data] [key findings]

Functional images: [What happens when activated]

Automated Alt Text Generation

AI-Generated Alt Text Limitations

AI tools can generate alt text automatically, but with limitations:

Strengths:

• Identifies objects in images
• Provides baseline descriptions quickly
• Scales to large image libraries

Weaknesses:

• Misses context (why this image is here)
• Lacks product-specific knowledge
• May miss important details humans recognize
• Can be wrong about image content

Best approach: Use AI generation as starting point, then human review for important images (products, key content).

TestParty's Approach

TestParty identifies images missing alt text and those with problematic alt text (filenames, redundant text). For e-commerce sites, TestParty flags product images needing attention and provides guidance for writing effective descriptions.

Development teams using Bouncer catch alt text issues before deployment. PreGame provides real-time feedback in VS Code when images lack alt attributes.

Testing Alt Text

Automated Testing

Automated tools detect:

• Missing alt attributes
• Empty alt on likely informative images
• Very long alt text
• Alt text matching filename
• Duplicate alt text across different images

Limitation: Automated testing can't evaluate alt text quality—only presence and patterns.

Manual Testing

Disable images and read the page:

1. Hide images (browser settings or extension)
2. Review page with only alt text visible
3. Can you understand the content?
4. Are products distinguishable?
5. Do functional elements make sense?

Screen reader testing:

1. Navigate to images using screen reader
2. Hear what's announced
3. Is the information sufficient?
4. Are decorative images correctly silent?

FAQ Section

Q: How long should alt text be?

A: Generally under 125 characters for simple descriptions. Screen readers can interrupt long text, but brevity helps users scan efficiently. Complex images may need longer descriptions via aria-describedby or linked text.

Q: Should every image have alt text?

A: Every <img> needs an alt attribute. Decorative images get empty alt (alt=""). Informative images get descriptive alt text. The question isn't whether to include alt, but what value to provide.

Q: How do I handle background images?

A: CSS background images don't support alt text. If the background conveys information, use <img> instead or provide text alternative elsewhere. Purely decorative backgrounds need no alternative.

Q: What about icon fonts?

A: Icon fonts need text alternatives via aria-label or visually hidden text. Or use inline SVG with proper accessibility attributes.

<button aria-label="Close">
  <span class="icon-close" aria-hidden="true"></span>
</button>

Q: Should alt text include keywords for SEO?

A: Alt text should be written for users, not search engines. Keyword stuffing degrades accessibility and user experience. Naturally descriptive alt text benefits both accessibility and SEO.

Key Takeaways

• Alt text is the most common accessibility failure. Missing or inadequate alt text appears on most websites.

• Context determines correct alt text. The same image may need different alt text in different contexts.

• Decorative images need empty alt, not missing alt. alt="" tells screen readers to skip; missing alt causes filename announcement.

• Functional images describe function, not appearance. A search button's alt is "Search," not "magnifying glass."

• E-commerce products need specific descriptions. Color, style, features—blind users rely entirely on your words.

• Automated testing catches presence, not quality. Manual review ensures alt text actually communicates effectively.

Conclusion

Alt text is foundational accessibility—the most basic requirement and the most frequently failed. Getting it right requires understanding image purpose, considering user needs, and writing descriptions that actually communicate.

For e-commerce sites, product alt text is particularly critical. Blind users cannot compare products, understand variations, or make informed purchases without effective image descriptions. Every product image without good alt text is a potential lost sale—and a barrier that violates accessibility law.

TestParty identifies missing and problematic alt text across your site. For e-commerce merchants, this means flagging product images needing attention. For development teams, Bouncer catches alt text issues before deployment.

Ready to fix your alt text? Get a free accessibility scan to see where your images need attention.

Related Articles:

• E-Commerce Accessibility: Product Page WCAG Compliance Guide
• Decorative vs Informative Images: WCAG Decision Guide
• Screen Reader Testing Guide: NVDA, JAWS, and VoiceOver

Written with AI help. Not legal advice—talk to experts for your specific situation.