Alt Text Best Practices: Writing Accessible Image Descriptions

Why Alt Text Matters

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

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">

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">

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">

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">

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">

Charts and Graphs

Summarize the data and trends:

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

Logos

Use the company name:

<img src="logo.png" alt="ClearA11y">

Icons with Meaning

Describe the action or meaning:

<img src="search-icon.svg" alt="Search">

Finding Missing Alt Text

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

AI-Powered Alt Text

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

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