Alt text best practices

Alt Text Best Practices: A Decision Tree for Every Image Type

Last updated · August 2, 2026

A content editor at a desk reviewing a grid of photographs on a laptop, considering each one carefully. Suggest editorial judgement rather than bulk processing. Natural window light, shallow depth of field, candid and dignified, cool indigo and cyan colour grade, clean uncluttered background. No text, no UI overlays, no legible screen content, no logos.

More than one in four images on popular home pages has missing, questionable, or repetitive alternative text. That figure comes from the WebAIM Million 2026 report, which analysed 66.6 million images across the top one million home pages in February 2026. It is the most comprehensive annual snapshot of web accessibility we have, and it makes one thing clear: alt text is still broken at scale.

The good news is that the proportion is steadily decreasing. The bad news is that most guidance misses the root cause. Teams are told to "describe the image." That is the wrong question. The right question is: what job is this image doing? The answer determines what the alt attribute should say - and sometimes whether it should say anything at all.

This post delivers a decision tree you can apply image by image, plus the patterns that produce bad alt text and what to do about them.

Why alt text keeps failing: the data

The WebAIM Million 2026 report (February 2026) found missing alt text on 53.1% of the top one million home pages - the second most common WCAG failure after low contrast text at 83.9%. That is an improvement from 55.5% in 2025 and 68% in 2019, and it is one of only two of the six persistent failures that improved this year. The other five got worse.

The image-level picture is more nuanced. 16.2% of all home page images - 10.8 per page on average - had a missing alt attribute (not counting alt=""), down from 18.5% in 2025. On top of that, 10.8% of images that did have alt text carried questionable or repetitive values: alt="image", alt="graphic", a filename, or text identical to adjacent content. Combined, that is more than one in four images with missing, questionable, or repetitive alt text - and the proportion is steadily decreasing.

The sector breakdown matters for EAA-scope organisations. Shopping sites averaged 71.0 errors per page and Travel 61.9, against a 56.1 overall average. Shopify-built sites averaged 75.1 errors and Magento 75.8. Overall, 95.9% of home pages had detectable WCAG 2 failures in 2026, up from 94.8%, reversing six years of slow improvement - with 56.1 errors per page, up 10.1%. WebAIM attributes part of this regression to third-party frameworks and automated or AI-assisted coding that ships without accessibility review.

Where alt text sits in the user-impact hierarchy

Before the decision tree, an honest note on priority. The WebAIM Screen Reader User Survey #10 (conducted December 2023-January 2024, 1,539 respondents) asked users to rank their most problematic web experiences. "Images with missing or improper descriptions" ranked sixth - behind CAPTCHA, interactive elements not behaving as expected, links or buttons that do not make sense, unexpected screen changes, and lack of keyboard accessibility.

That ranking does not make alt text unimportant. It means broken interaction is worse. Fix keyboard traps and unlabelled controls first if you have to triage. Then fix alt text - because it is a Level A criterion, it is cheap to fix, and a market surveillance authority can screenshot the failure in seconds.

One more reason to get alt text right: 38% of screen reader users in the WebAIM Survey #10 use braille output. Verbose or redundant alt text costs braille users real reading time - it is not just heard, it is read character by character. Concision matters. And 85.9% of screen reader survey respondents said better websites, not better assistive technology, would help most.

The decision tree: alt text best practices by image function

45% of images missing alternative text in the WebAIM Million 2026 were linked images - and one in four linked images was missing alt text entirely. That is why linked images come first.

Branch 1 - Linked images (SC 1.1.1 + SC 2.4.4)

45% of images missing alt text in the 2026 WebAIM Million were linked images, and one in four linked images was missing alt text. This is the single highest-impact branch.

When an image is the only content of a link, the alt attribute becomes the link's accessible name. It must describe the destination, not the picture.

<!-- Logo linking to homepage -->
<a href="/">
  <img src="logo.svg" alt="Home">
</a>

<!-- Product image linking to product page -->
<a href="/products/blue-jacket">
  <img src="blue-jacket.jpg" alt="Blue waterproof jacket - product page">
</a>

If the link contains both an image and visible text, set alt="" on the image. The text already names the link; a duplicate alt creates redundancy that braille users pay for in keystrokes.

<!-- Image + text link: image is redundant -->
<a href="/about">
  <img src="team.jpg" alt="">
  Our team
</a>

Failing criterion: SC 2.4.4 Link Purpose (In Context), Level A. Also SC 1.1.1.

Branch 2 - Decorative or redundant images (SC 1.1.1)

A decorative image adds no information. The correct treatment is alt="" - an empty alt attribute, not a missing one.

A missing alt attribute is not the same as an empty one. When the attribute is absent entirely, screen readers fall back to announcing the filename - often something like hero-banner-v3-FINAL2.jpg. That is noise, not silence.

<!-- Decorative: empty alt, attribute present -->
<img src="divider.png" alt="">

<!-- CSS background: no alt needed, not in the DOM -->
<div class="hero-bg" style="background-image: url('hero.jpg')">
  <h1>Our services</h1>
</div>

<!-- Inline SVG icon, decorative -->
<svg aria-hidden="true" focusable="false">...</svg>

Whether an image is decorative is an editorial judgement. Automated tools cannot make it. A purely decorative image in one context may carry meaning in another.

Branch 3 - Informative images (SC 1.1.1)

Convey the information the image communicates, not its visual appearance. One sentence is usually enough.

<!-- Bad: describes appearance -->
<img src="chart.png" alt="A blue bar chart with orange accents">

<!-- Good: conveys the information -->
<img src="chart.png" alt="Error rates rose from 51 to 56.1 per page between 2025 and 2026.">

Rules of thumb:

No "Image of" or "Picture of" prefix - screen readers already announce the element role.
End with a full stop. It creates a natural pause in speech output.
Keep it under roughly 100-125 characters. Some screen readers truncate or change behaviour beyond that length.
Do not keyword-stuff. Packing alt text with search terms harms users and is not what search engines reward - Google explicitly treats it as a spam signal.

Branch 4 - Functional controls (SC 4.1.2)

An <input type="image"> or an icon-only button needs alt text that describes the action, not the glyph.

<!-- Search button -->
<input type="image" src="search-icon.png" alt="Search">

<!-- Icon button: describe the action -->
<button>
  <img src="trash.svg" alt="Delete item">
</button>

alt="magnifying glass" tells the user what they are looking at. alt="Search" tells them what will happen. The second is correct.

Failing criterion: SC 4.1.2 Name, Role, Value, Level A.

Branch 5 - Images of text (SC 1.4.5)

If the image contains readable text, reproduce that text exactly in the alt attribute.

<img src="sale-banner.png" alt="Summer Sale - 30% off all orders">

But the better fix is to not use images of text at all. SC 1.4.5 Images of Text (Level AA) says that if the same visual presentation can be achieved with real text, you must use real text. The exception is logotypes.

Branch 6 - Complex images: charts, diagrams, maps, infographics (SC 1.1.1)

A short alt attribute cannot carry the full content of a chart or diagram. The pattern is: short alt for the key finding, long description in visible content.

<figure>
  <img
    src="error-trend.png"
    alt="Bar chart: WCAG errors per page rose from 51 in 2025 to 56.1 in 2026."
    aria-describedby="chart-desc"
  >
  <figcaption id="chart-desc">
    The chart shows six failure categories tracked from 2019 to 2026.
    Low contrast text affects 83.9% of pages (up from 79.1%).
    Missing alt text affects 53.1% (down from 55.5%).
    <!-- full data table here -->
  </figcaption>
</figure>

Prefer visible long descriptions over hidden ones. Sighted users with cognitive differences benefit from the same plain-text explanation. A <details>/<summary> disclosure is a practical middle ground when the description is long.

Branch 7 - CAPTCHA and purely sensory images

WCAG SC 1.1.1 includes a specific exception for CAPTCHA: provide alt text that identifies the purpose (e.g. alt="Type the characters shown to verify you are human") and offer an alternative modality such as audio. Purely decorative sensory images - a photograph used only for atmosphere - follow Branch 2: alt="".

Patterns that produce bad alt text

These are the failure modes automated tools can flag but not always catch:

Filename alt - alt="IMG_4521.jpg" or alt="hero-banner-v3-FINAL2.png". Usually a CMS default when no alt has been entered.
Generic role alt - alt="image", alt="graphic", alt="photo". Tells the user nothing the screen reader has not already announced.
Caption duplication - copying the visible caption verbatim into alt creates redundancy. If the caption is adjacent and programmatically associated, alt="" is correct.
SEO keyword stuffing - alt="blue jacket waterproof jacket men's jacket buy jacket". This harms users and is treated as a spam signal by search engines. It is not a compliance strategy.
CMS title-field population - many CMS configurations auto-populate alt from the image title field. The title field is usually a filename or an internal asset name. Audit your CMS defaults.
Icon fonts - <i class="fa fa-search"></i> has no alt attribute. Add aria-label="Search" to the parent button, or switch to inline SVG with role="img" and a <title> element.
Inline SVG without a name - <svg> without role="img" and either a <title> or aria-label will be announced as "image" or ignored inconsistently across screen readers.
Meaningful CSS background images - if a background image conveys information (a status icon, a rating star), it is not decorative. Move it to an <img> with appropriate alt, or add a visually-hidden text alternative.

A missing alt attribute is not the same as alt="". Missing alt causes screen readers to announce the filename. Empty alt (alt="") tells screen readers to skip the image silently. Always include the attribute, even when the value is empty.

AI-generated alt text: useful, not sufficient

AI image-recognition tools can generate alt text at volume and are genuinely useful for clearing a backlog of thousands of untagged images. That is a real benefit.

But AI cannot make the three judgements the decision tree turns on:

Is this image decorative? That depends on editorial context, not pixel content. An AI sees a photograph of a person; only the author knows whether that person is identified in adjacent text, making the image redundant.
What is the link destination? A linked image's alt must describe where the link goes. An AI sees the image; it cannot read the href.
What information does this image convey in context? A chart alt should state the key finding, not describe the visual. That requires understanding the surrounding content.

The correct workflow is: generate, then human-review. Never generate-and-ship. Use AI output as a first draft that flags the images needing attention, not as a finished product.

Auditing alt text at scale

Run an automated crawl

Tools like Axe, WAVE, or Deque's browser extensions reliably detect a missing alt attribute (a clear WCAG failure) and can flag suspicious values like filenames or alt="image". This gives you the volume picture quickly.

Prioritise linked images and product images

45% of images missing alt text are linked images — the highest-impact category. Product images are the second priority for e-commerce and retail: blind users cannot compare products or understand variations without effective descriptions.

Sample manual review

Automated tools cannot judge whether a present alt is correct. Pull a representative sample — 50–100 images across image types — and review each against the decision tree. This is the only way to catch keyword-stuffed, caption-duplicating, or contextually wrong alt text.

Fix the CMS, not just the content

Make alt a required editorial field in your CMS. If alt can be left blank, it will be. If the CMS auto-populates alt from the title field, change that default. Structural fixes prevent recurrence; campaign-by-campaign remediation does not.

Retest after each content release

New images ship constantly. Build alt text into your content QA checklist so it is checked before publish, not discovered in the next audit.

Reviewer checklist

Copy this into your QA process or content style guide.

Check	Pass condition
Every `<img>` has an `alt` attribute	Attribute present, even if empty
Decorative images use `alt=""`	Not missing, not `alt="image"`
Linked images describe the destination	Not the picture content
Adjacent-text links set `alt=""` on the image	Link text carries the name
Functional controls describe the action	`alt="Search"` not `alt="magnifying glass"`
Images of text reproduce the text exactly	Or replaced with real text (SC 1.4.5)
Complex images have a short alt + long description	Long description is visible to all users
No filename, generic role, or keyword-stuffed values	No `alt="IMG_001.jpg"`, `alt="graphic"`, or keyword lists
Inline SVG icons have `aria-hidden="true"` or `role="img"` + accessible name	Consistent across browsers
CMS alt field is required, not auto-populated from title	Checked in CMS configuration

The EAA stake

Under the European Accessibility Act, the operative technical baseline is WCAG 2.1 AA via EN 301 549 v3.2.1, currently cited as harmonised in the Official Journal. A draft of v4.1.0 was published in November 2025; EN 301 549 v4.1.1, aligning with WCAG 2.2, is expected to be cited in the Official Journal later in 2026 - treat that as expected, not settled.

SC 1.1.1 Non-text Content is Level A - the lowest conformance threshold. Level A failures are the easiest for a market surveillance authority or complainant to demonstrate. A missing alt attribute on a linked product image is a screenshot, a browser inspector, and a WCAG reference. That is the entire evidence package.

The cost asymmetry is stark. Alt text best practices require editorial time, not engineering time. A content editor can fix a missing or wrong alt attribute in seconds. The same failure, left unaddressed, is the most demonstrable WCAG violation on your site.

Fix the CMS defaults. Make alt a required field. Apply the decision tree. The proportion of problematic images is decreasing - your organisation should be part of that trend, not a reason it stalls.