How to Write Alt Text for Images: The Complete WCAG 2.1 Guide with Examples

If you've ever uploaded an image to your website and left the alt text field blank—or typed something like "image1.jpg"—you're not alone. But you're also creating a real accessibility problem, and increasingly, a legal one. Alt text errors are consistently among the top three violations found in ADA accessibility lawsuits, which surpassed 4,600 federal cases in 2023. Learning how to write alt text for images correctly is one of the highest-impact fixes you can make to your site, and it takes less time than you think.

This guide walks you through WCAG 2.1 requirements, common mistakes, and the exact syntax to use—with real code examples.

Why Alt Text Matters (Beyond Compliance)

Alt text serves three audiences simultaneously: screen reader users who rely on it to understand visual content, search engines that use it to index your images, and any user whose browser fails to load the image.

Under WCAG 2.1 Success Criterion 1.1.1 (Non-text Content), every meaningful image must have a text alternative that "serves the equivalent purpose." That's not a suggestion—it's a Level A requirement, meaning it's the baseline. Failing it puts you out of conformance with the ADA, Section 508, and most international accessibility standards.

The legal exposure is real. Plaintiffs' firms use automated scanning tools to identify missing or broken alt text in minutes. If your site is flagged, the average cost to settle an ADA web accessibility lawsuit runs between $25,000 and $100,000 once you factor in legal fees.

The Core Rule: Meaningful vs. Decorative

Before writing a single word, you need to make a decision about every image on your page: Is this image informative, or is it purely decorative?

This distinction changes everything about what you write.

Informative Images

An informative image conveys information that isn't provided anywhere else in the surrounding text. Product photos, charts, graphs, screenshots, headshots, and instructional diagrams all fall into this category.

For these, write alt text that describes the purpose or content of the image—not what it looks like in a literal, exhaustive way.

<!-- Poor alt text -->
<img src="dashboard-screenshot.png" alt="screenshot">

<!-- Better alt text -->
<img src="dashboard-screenshot.png" alt="WCAG Repair dashboard showing 14 accessibility errors flagged across 3 pages">

Decorative Images

A decorative image adds visual appeal but doesn't add meaning. Think background textures, stylistic dividers, or stock photos that simply reinforce what the surrounding text already says.

For decorative images, use an empty alt attribute—not no alt attribute. This tells screen readers to skip the image entirely.

<!-- Correct: empty alt tells screen readers to ignore this -->
<img src="decorative-swirl.png" alt="">

<!-- Wrong: missing alt attribute entirely causes screen readers to announce the filename -->
<img src="decorative-swirl.png">

This is one of the most common mistakes developers make. Missing alt text and empty alt text are not the same thing. One is an error; the other is intentional communication.

How to Write Alt Text for Images: Practical Rules

Here's the framework to follow every time.

1. Describe Function, Not Just Appearance

Ask yourself: Why is this image here? What would a sighted user understand from it that a non-sighted user would miss?

A photo of a smiling customer service rep on a "Contact Us" page isn't about hair color or shirt style. The relevant context is that there's a person, signaling human support.

<img src="support-team.jpg" alt="Friendly support team member ready to help">

2. Keep It Concise—Usually Under 125 Characters

Screen readers will read alt text verbatim. Long descriptions interrupt the reading flow. For most images, one clear sentence is sufficient.

If an image is genuinely complex—like a data chart or infographic—use the alt attribute for a short description and provide a longer explanation in the body text, a caption, or a linked page.

<!-- For a complex chart -->
<img src="q3-revenue-chart.png" alt="Bar chart showing Q3 revenue by region. Full data table follows below.">

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

Screen readers already announce that they're reading image content. Starting with "Image of a dog" is redundant and wastes the user's time. Just describe the content: "Golden retriever playing fetch on a beach."

4. Include Text That Appears in the Image

If your image contains readable text—like a banner, button graphic, or promotional image with a headline—that text must be included in the alt attribute.

<img src="sale-banner.png" alt="Summer Sale — 40% off all plans through July 31">

5. Context Changes Everything

The same image can require different alt text depending on where it appears. A photo of a red apple on a grocery store product page needs alt text like "Fresh Fuji apple, sold per pound." The same photo used as a decorative header on a recipe blog might be decorative and warrant an empty alt.

Special Cases Worth Knowing

Linked Images

If an image is wrapped in a link and there's no visible link text, the alt text becomes the accessible name of the link. Describe the destination, not just the image.

<!-- Wrong -->
<a href="/pricing"><img src="pricing-icon.png" alt="icon"></a>

<!-- Right -->
<a href="/pricing"><img src="pricing-icon.png" alt="View pricing plans"></a>

SVGs

Inline SVGs need a <title> element and role="img" plus aria-labelledby to be accessible to screen readers.

<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Upward trend in monthly active users</title>
  <!-- SVG paths here -->
</svg>

CSS Background Images

If you're using CSS background-image to display meaningful content, that image is invisible to screen readers. Move meaningful visuals to <img> elements, or provide a visually hidden text alternative in the HTML.

Quick Audit Checklist

Before publishing any page, run through these five questions for every image:

1. Does every <img> tag have an alt attribute? (Even decorative ones need alt="")
2. Is the alt text describing the purpose of the image, not just what it looks like?
3. Is visible text within images included in the alt text?
4. Are linked images using alt text that describes the link destination?
5. Are complex images (charts, infographics) supplemented with extended descriptions?

One Fix, Real Impact

Understanding how to write alt text for images isn't complicated once you internalize the core question: What does this image communicate, and how do I put that in words? The technical implementation is a single HTML attribute. The skill is learning to think like your users—including the ones who can't see.

The good news: alt text is one of the fastest accessibility wins available. A developer can audit and fix an entire small business website in a few hours. The legal and ethical upside is immediate.

Ready to find out how many alt text issues your site has right now? Scan your site for free at wcagrepair.com and get a remediation guide with exact code fixes for $8.99. You'll know exactly what's broken and precisely how to fix it—no guesswork required.