Level A · WCAG 2.0
1.1.1 Non-text Content
Every image, icon, chart and control that is not text needs a text alternative that serves the same purpose. Decoration needs an empty alternative so assistive technology skips it.
Partly automated Some failures are detectable, others need judgement.
How it fails in practice
A product gallery where every file is announced as “IMG_4417.jpg”. An icon-only “delete” button with no label. A sales chart whose only description is “chart”.
How to fix it
Write alt text that says what the image is for in this place, not what it depicts in general. A product photo needs the product, a linked logo needs the destination, a decorative divider needs alt="".
At a glance
- Level
- Level A — the minimum. Failing one of these usually makes something impossible rather than merely hard.
- Principle
- Perceivable
- Guideline
- 1.1 Text Alternatives
- Added in
- WCAG 2.0
- EN 301 549
- 9.1.1.1
- Automated check
- Partly automated
How to test it by hand
- List every image, icon and chart on the page with its text alternative — the Accessibility pane in your browser’s developer tools, or a screen reader’s list of graphics, shows what is actually announced.
- For each one, ask whether the alternative would do the image’s job if the image were gone. A linked image names where the link goes; a product photo names the product.
- Check every button and link that is only an icon: each needs a name, from visible text,
aria-labelor visually hidden text. - Make sure decoration stays silent:
alt=""or a CSS background — not “image”, not the file name. - For charts and infographics, check that the information is on the page as text too — a summary or a table.
In code
<img src="IMG_4417.jpg">
<button class="icon-button">
<svg viewBox="0 0 24 24"><path d="…"/></svg>
</button><img src="linen-shirt-navy.jpg" alt="Linen shirt in navy, front view">
<button class="icon-button" aria-label="Remove from basket">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="…"/></svg>
</button>
<img src="divider.svg" alt="">Partly automated
How far an automated check gets
A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.
A missing alternative is found automatically. Whether the alternative is right is a judgement, which is why our alt-text suggestion writes one from the image and the page around it and marks its own answer against the same guidance a human reviewer would use — for a person to accept or reject.
Rules that check this criterion
aria-meter-nameARIA meter nodes must have an accessible namearia-progressbar-nameARIA progressbar nodes must have an accessible nameimage-altImage without alt textinput-image-altImage button without alt textobject-alt<object> elements must have alternative textrole-img-altrole="img" element without a namesvg-img-altSVG image without a text alternative
The rule ids are axe-core’s (version 4.14.0), the open-source engine our scan runs, and our keyboard agent’s — the names a report or a CI log will show. An underlined id has a page of its own here.
Where it matters most
The guides that list it among the criteria to check first.
Further reading
-
Alt text
A text alternative that conveys an image's content or function; decorative images get an empty alt attribute (WCAG 1.1.1).
-
image-alt
The axe rule image-alt flags img elements with no text alternative. When to describe, when to use alt="", with code example and a manual test.
-
input-image-alt
The axe rule input-image-alt flags buttons with no text alternative. Name the action, not the picture – with code example.
-
role-img-alt
The axe rule role-img-alt flags elements with role="img" that have no accessible name. Add aria-label or remove the role – with code example.
-
svg-img-alt
The axe rule svg-img-alt flags inline SVG with role="img" and no accessible name. Add a title or aria-label, or hide decoration – with code example.
Find out which criteria your site fails
We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.