DEV Community

Matthew Dillon
Matthew Dillon

Posted on • Originally published at cleara11y.net on

Alt Text Best Practices: Writing Accessible Image Descriptions

#alttext #images #screenreaders #a11y

Why Alt Text Matters

Alt text (alternative text) describes images for users who can't see them. This includes:

  • Blind users using screen readers
  • Low-bandwidth users with images disabled
  • Search engines trying to understand your content

Missing or poor alt text is one of the most common accessibility issues on the web.

The Golden Rules of Alt Text

1. Be Descriptive, Not Decorative

Describe what the image shows, not what it is:

<!-- Bad -->
<img src="team.jpg" alt="Image of people">

<!-- Good -->
<img src="team.jpg" alt="Five team members smiling in front of our San Francisco office">
Enter fullscreen mode Exit fullscreen mode

2. Keep It Concise

Aim for 125 characters or less. Screen readers may truncate longer descriptions.

3. Don't Start with "Image of" or "Picture of"

Screen readers already announce it's an image:

<!-- Bad - redundant -->
<img alt="Image of a golden retriever playing fetch">

<!-- Good -->
<img alt="Golden retriever catching a tennis ball mid-air">
Enter fullscreen mode Exit fullscreen mode

4. Include Text in Images

If your image contains text, include that text in the alt:

<img src="sale-banner.jpg" alt="Summer Sale: 50% off all items through July 31st">
Enter fullscreen mode Exit fullscreen mode

When to Use Empty Alt Text

Decorative images that don't add information should have empty alt text:

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

<!-- Background decoration -->
<img src="pattern.svg" alt="" role="presentation">
Enter fullscreen mode Exit fullscreen mode

This tells screen readers to skip the image entirely.

Alt Text for Different Image Types

Product Images

Include product name, color, size, and key features:

<img alt="Nike Air Max 90 running shoes in white and red, men's size 10">
Enter fullscreen mode Exit fullscreen mode

Charts and Graphs

Summarize the data and trends:

<img alt="Bar chart showing sales increased 45% from Q1 to Q4 2024">
Enter fullscreen mode Exit fullscreen mode

Logos

Use the company name:

<img src="logo.png" alt="ClearA11y">
Enter fullscreen mode Exit fullscreen mode

Icons with Meaning

Describe the action or meaning:

<img src="search-icon.svg" alt="Search">
Enter fullscreen mode Exit fullscreen mode

Finding Missing Alt Text

Manually checking every image is tedious. Use ClearA11y to automatically scan your pages for:

  • Missing alt attributes
  • Empty alt on informative images
  • Alt text that's too long
  • Suspicious alt text (like filenames)

AI-Powered Alt Text

ClearA11y's AI analyzes your images and suggests contextual alt text based on:

  • Image filenames
  • Surrounding content
  • Page context

Try it free and fix your alt text issues in minutes.

Top comments (0)