Alt text (alternative text) is a short written description of an image, set with the HTML alt attribute, that screen readers announce to people who can’t see it. It also displays if the image fails to load. Writing it correctly satisfies WCAG 2.1 AA success criterion 1.1.1 Non-text Content — and it’s one of the most common, most fixable accessibility issues on the web.

What makes alt text good

Good alt text conveys the content and function of an image in its context, concisely. The same photograph can need completely different alt text depending on why it appears on the page. A headshot in a team bio needs the person’s name; the identical photo used as a decorative page-header backdrop needs no alt text at all.

So before you write anything, ask one question: what job is this image doing here? That answer — not what the image literally depicts — drives everything. A magnifying-glass icon isn’t “magnifying glass,” it’s “Search.” A red downward arrow next to a revenue figure isn’t “red arrow,” it’s “down 12% from last quarter.”

Two rules cover most cases:

  • Describe purpose, not pixels. Skip color, composition, and resolution unless they carry meaning.
  • Don’t duplicate nearby text. If a caption or heading already states what the image shows, the alt text can be shorter or empty to avoid making screen reader users hear the same thing twice.

Image types and how to handle each

Most accessibility decisions come down to correctly classifying the image. The W3C WAI Images Tutorial is the authoritative decision tree; here are the categories you’ll meet daily.

Informative images

These carry information the surrounding text doesn’t. Describe what matters, briefly.

<img src="chart.png"
     alt="Bar chart: 2,300 ADA web lawsuits filed in 2024, up from 1,900 in 2023">

Functional images (linked or interactive)

When an image is a link or button, the alt text must describe the action or destination, not the picture. A logo that links to the homepage describes where it goes; an icon button describes what it does.

<a href="/"><img src="logo.svg" alt="Curbcut home"></a>
<button><img src="search.svg" alt="Search"></button>

Decorative images

If an image adds no information — a background texture, a divider flourish, a purely atmospheric stock photo — give it an empty but present alt attribute so assistive technology skips it.

<img src="swoosh.svg" alt="">

This is decorative vs informative in practice. The attribute must exist; deleting it entirely is a mistake (more on that below).

Images of text

If an image contains words — a wordmark, a quote graphic, a “50% Off” banner — the alt text must include those exact words. Better still, use real HTML text and CSS where you can, because it scales and reflows for everyone.

<img src="quote.png" alt="“Accessibility is not a feature, it's a baseline.” — Jane Doe">

Complex images (charts, graphs, infographics)

A single sentence can’t carry a data-rich chart. Give a short alt that names the chart and its headline takeaway, then provide a longer description nearby — in the body text, a caption, a data table, or a linked page.

<img src="quarterly.png"
     alt="Line graph of quarterly support tickets, 2024 (full data in table below)">

The long description does the heavy lifting; the alt just orients the listener and points to it.

Icons and CSS-background images

Icon fonts and CSS background-image are invisible to the alt attribute because there’s no <img> element. If the icon is decorative, hide it (aria-hidden="true" on the icon element). If it’s functional — an icon-only control — give the interactive element an accessible name with aria-label:

<button aria-label="Close menu">
  <svg aria-hidden="true">...</svg>
</button>

This is the one place where ARIA legitimately replaces alt text: aria-label supplies the name when there’s no <img> to carry it.

Common alt text mistakes

These are the patterns we correct most often during remediation:

  1. Missing the alt attribute entirely. With no alt, many screen readers read the file name aloud — so users hear “I-M-G underscore 4 8 2 1 dot jpg.” A missing alt is not the same as an empty one; only the empty alt="" tells the screen reader to skip the image.
  2. Starting with “image of” or “photo of.” Redundant — assistive technology already announces the element as a graphic.
  3. Keyword stuffing. Packing alt text with search terms hurts real users and reads as manipulative to search engines.
  4. Empty alt on a meaningful image. Putting alt="" on an informative or functional image silently hides real content from screen reader users.
  5. Filename as alt. alt="DSC_0042" or alt="hero-final-v3" tells nobody anything.
  6. Describing the obvious instead of the point. A “down 12%” trend arrow described as “red arrow icon” loses the only information that mattered.

How to write alt text, step by step

A repeatable process you can run on every image:

  1. Classify it. Informative, functional, decorative, image-of-text, or complex? (See the types above.)
  2. If decorative, stop — write alt="" and move on.
  3. If functional, describe the action or destination (“Search”, “Curbcut home”).
  4. If informative, state what matters in context in roughly 125 characters or fewer.
  5. If it’s an image of text, transcribe the words. If it’s complex, write a short alt and add a longer description nearby.
  6. Read it back without the image. If the sentence still makes sense and nothing important is lost, you’re done.

How to test alt text

Automated scanners flag missing alt attributes instantly, but they can’t judge whether the words you wrote are actually good — only a human can. Combine both.

  • Run a quick automated pass. A free accessibility scan or browser extension catches every image with no alt attribute.
  • Inspect the markup. In browser DevTools, right-click an image and “Inspect” to read the live alt value — useful for images injected by JavaScript or a CMS.
  • Listen with a screen reader. This is the real test. Turn on VoiceOver (Mac/iOS, built in), NVDA (Windows, free), or JAWS, then Tab and arrow through the page. Does each announcement make sense on its own? Does decorative clutter stay silent?
  • Try the images-off check. Disable images in your browser and read the page. Wherever the meaning falls apart, your alt text needs work.

For a deeper walkthrough of how this assistive technology actually parses your page, see how screen readers work.

Alt text and SEO: the curb-cut effect

Descriptive alt text is one of the cleanest examples of the curb-cut effect — a fix made for disabled users that quietly helps everyone. The same words that let a screen reader user understand your product photo also let Google understand it for Image search, surface it for relevant queries, and use it as on-page context.

The rule that keeps you out of trouble: write for users first, and the SEO benefit follows. Alt text engineered for crawlers (stuffed with keywords) reads badly to humans and can look manipulative to search engines anyway. Alt text written to genuinely describe the image tends to contain the right keywords naturally — because that’s what the image is about.

Where alt text fits in the bigger picture

Alt text is high-impact and quick, which makes it a great place to start. But full WCAG 2.1 AA conformance also covers color contrast, accessible forms, heading structure and landmarks, ARIA, and keyboard support. For the official guidance behind all of it, see the W3C Web Accessibility Initiative and WebAIM.

We fix images by hand as real code changes — we’re deliberately anti-overlay, because a widget that auto-generates alt text from filenames produces exactly the useless “image of DSC_0042” output we warned about. If you’d rather not audit every image yourself, Curbcut’s accessibility remediation service handles the whole WCAG 2.1 AA picture, a full accessibility audit finds every gap, or you can start with a free scan.