Alt Text Basics

title: "Alt Text Basics — Writing Effective Alternative Text" description: "Learn how to write effective alt text for images that conveys the same information to screen reader users, with examples and best practices." weight: 2 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Effective alt text describes the content and function of an image in a concise, accurate way that conveys the same information to users who cannot see it.

## What You'll Learn

How to write alt text for different image types, common pitfalls, and how to test alt text effectiveness.

## Why It Matters

Screen reader users rely on alt text. Poor alt text (missing, vague, keyword-stuffed) degrades the experience. Good alt text makes content accessible.

## Real-World Use

A product catalog page shows a blue cotton t-shirt. The alt text says "Men's classic-fit blue cotton t-shirt, sizes S-XXL." The screen reader user understands the product without seeing the image.

## Alt Text Examples

```html
<!-- Informative image -->
<img src="chart-revenue-2026.png"
     alt="Bar chart showing revenue growth from $1M in Q1 to $1.5M in Q4 2026">

<!-- Photograph -->
<img src="team-photo.jpg"
     alt="DodaTech engineering team posing in front of office building">

<!-- Logo -->
<img src="logo.svg" alt="DodaTech">

<!-- Icon with text -->
<img src="phone-icon.svg" alt="">
<span>Call us: 1-800-555-0199</span>

Testing Alt Text

<!-- Test: if someone reads only the alt text, do they understand the image? -->

<!-- Good -->
<img src="warning.png" alt="Warning: Your session will expire in 5 minutes">

<!-- Bad -->
<img src="warning.png" alt="Warning icon">

Common Mistakes

1. File name as alt text

alt="IMG_20240101_12345.jpg" is useless. Write a description.

2. Alt text that duplicates caption

If a caption already describes the image, use alt="" to avoid redundancy.

3. "Image of" or "Picture of" in alt

Screen readers already say "image." Start with the description.

4. Keyword stuffing

alt="buy cheap shoes online best price shoes sale shoes" is bad for both accessibility and SEO.

5. No alt on important images

Missing alt on meaningful images leaves screen reader users without information.

Practice Questions

1. What should alt text describe? The content and function of the image, not its appearance or format.

2. How long should alt text be? 1-2 sentences (125-150 characters) for standard alt. Use long descriptions for complex images.

3. How do you test if alt text is effective? Read only the alt text to someone. If they understand the image content, it is effective.

Challenge: Write alt text for 5 different images: a photo, a chart, a logo, an icon button, and an infographic.

FAQ

Mini Project

Find 10 images on your favorite website. Evaluate the alt text for each. Rewrite any alt text that is missing, vague, or keyword-stuffed.

What's Next

Learn about Decorative Images and how to use empty alt text to hide purely decorative images from screen readers.