Accessible Image Alt Text Best Practices: Writing Descriptions That Work

Every image on the web needs a text alternative. WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) requires it at Level A — the most basic compliance level. Yet alt text remains one of the most frequently failed accessibility requirements, with WebAIM’s 2024 Million Home Pages study finding that 22% of all images lacked alt text. Writing effective alt text is not just about adding the attribute — it is about communicating the right information for the image’s context.

The Decision Tree

Not every image needs a description. The first question is: what role does this image play?

Informative Images

Images that convey content not available in surrounding text. These need descriptive alt text.

Example: A product photo on an e-commerce page.

<img src="sneaker.jpg" alt="Nike Air Max 90 in white with red accents, side view showing the visible air cushion unit" />

Decorative Images

Images that add visual interest but convey no information — background textures, ornamental borders, decorative illustrations that duplicate adjacent text. These should have empty alt text.

<img src="divider.svg" alt="" />

An empty alt="" tells screen readers to skip the image entirely. Omitting the alt attribute altogether causes screen readers to announce the file name, which is worse: “divider dot SVG.”

Functional Images

Images inside links or buttons that serve as the only content. The alt text should describe the function, not the image.

Example: A logo that links to the homepage.

<a href="/">
  <img src="logo.svg" alt="Acme Corp home page" />
</a>

The alt text describes where the link goes, not what the logo looks like. “Acme Corp logo” is less useful than “Acme Corp home page” because users care about the action, not the visual.

Complex Images

Charts, diagrams, infographics, and maps that contain dense information. These need both a brief alt text and a longer description.

<figure>
  <img src="revenue-chart.png" alt="Bar chart showing quarterly revenue from Q1 2023 to Q4 2024" />
  <figcaption>
    Revenue grew from $2.1M in Q1 2023 to $4.8M in Q4 2024, with the steepest growth in Q3 2024.
    <a href="/data/revenue-table">View full data table</a>.
  </figcaption>
</figure>

For complex data visualizations, see accessible dashboard design for strategies on providing data table alternatives.

Images of Text

Images containing text — screenshots of quotes, styled headings rendered as images, memes with captions. The alt text must include all text visible in the image. Better yet, do not use images of text when real text can achieve the same visual result (WCAG 1.4.5).

Writing Effective Alt Text

Be Specific and Concise

Describe what matters in the image for its context. A photo of a team at a conference might need different alt text depending on use:

• Company about page: “The engineering team at the 2024 Web Accessibility Conference, six people standing in front of the EZUD banner”
• Blog post about the conference: “Crowded exhibition hall at the 2024 Web Accessibility Conference with attendees visiting vendor booths”
• Team member profile: “Sarah Chen speaking at the 2024 Web Accessibility Conference keynote stage”

Context determines what details matter.

Do Not Start With “Image of” or “Photo of”

Screen readers already announce “image” before reading the alt text. Starting with “Image of” creates redundancy: “Image, image of a dog.” Skip the prefix and start with the content description.

Exception: When the medium is relevant — “Painting of a sunset over Lake Michigan” or “Satellite photo of Hurricane Maria” — the medium adds meaning.

Include Relevant Details

• People: Race, gender, age range, and appearance details when relevant to the context. A stock photo on a diversity page should describe the diverse group. A headshot should describe the person.
• Text in images: Transcribe all visible text.
• Emotions and actions: “A woman laughing while holding a coffee cup” is more useful than “A woman with a cup.”
• Setting: When the location or environment is relevant.
• Color: When color conveys meaning (a red warning sign, a blue ribbon for first place).

Keep It Appropriately Sized

There is no strict character limit, but guidelines suggest:

• Simple images: 10-15 words
• Moderate complexity: 1-2 sentences
• Complex images: Brief alt text plus a longer description in the surrounding text or a linked detail page

Screen readers do not truncate alt text, but excessively long alt text (multiple paragraphs) becomes tedious. If the description requires more than 2-3 sentences, use <figcaption>, aria-describedby, or a linked description.

Alt Text for Common Image Types

Product Photos

Describe the product’s appearance, including key features visible in the image:

"Stainless steel water bottle, 32 oz, with a bamboo cap and a black silicone grip band"

Screenshots

Describe the relevant content shown in the screenshot, not every pixel:

"Settings dialog showing the Accessibility section with 'Enable high contrast mode' checkbox selected"

Icons

When icons are informative (not accompanied by text), the alt text describes the function:

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

When icons accompany visible text, make them decorative:

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

Logos

Describe the company or brand name and, if the logo links somewhere, the destination:

"EZUD — Universal Design Resources"

User-Generated Images

For platforms where users upload images (social media, forums, e-commerce reviews), provide tools for users to add alt text and educate them on its importance. See accessible social media content creation.

CSS Background Images

Images applied through CSS background-image have no alt attribute mechanism. If the background image conveys information:

• Move it to an <img> element in HTML
• Or use role="img" with aria-label on the container:

<div class="hero" role="img" aria-label="Sunset over the San Francisco skyline">
</div>

If the background image is decorative, no action is needed — screen readers ignore CSS backgrounds by default.

AI-Generated Alt Text

Automated alt text generation (through AI services) is improving but has limitations:

• AI may describe the image literally without understanding its context on the page
• Accuracy varies for complex scenes, text in images, and cultural context
• AI-generated alt text should be reviewed by a human, especially for important content
• Use AI as a starting point for drafting alt text, not as a final solution

Testing Alt Text

1. Screen reader test: Navigate through all images on the page. Does each alt text communicate the image’s purpose in context?
2. Alt text review: Read every alt text in isolation. Does it make sense without seeing the image?
3. Decorative image check: Are decorative images correctly marked with alt=""? Screen readers should skip them.
4. Missing alt text: Run axe DevTools or WAVE to find images without alt attributes.
5. Apply testing methodology for comprehensive validation.

Key Takeaways

Alt text is context-dependent — the same image may need different descriptions depending on where and why it appears. Use the decision tree: informative images get descriptive alt text, decorative images get empty alt text, functional images describe the function, and complex images get brief alt text plus a longer description. Write concisely, be specific to context, skip “image of” prefixes, and include text visible in the image. Review AI-generated alt text before publishing. Effective alt text is the lowest-effort, highest-impact accessibility practice on the web.

Sources

• WCAG 2.2 SC 1.1.1 Non-text Content — The Level A requirement for text alternatives.
• W3C WAI: Images Tutorial — Comprehensive tutorial on accessible image alt text.
• WebAIM: Alternative Text — Best practices for writing alt text.
• The A11Y Project: How to Write Alt Text — Practical alt text decision tree.