Give decorative images an empty alt
A decorative image takes an empty alt attribute, written as alt="", present but with nothing in it. That tells assistive technology to skip the image entirely. Missing alt and empty alt are opposite signals, and W3C says so in as many words. A null alt attribute is not the same as having no alt attribute. W3C lists H67 as sufficient for 1.1.1 Non-text Content, so marking decoration this way meets the rule for those images. There is a second half to this technique, and it sits right in W3C's name for it, using null alt text and no title attribute. So the test is two checks rather than one. A title attribute on the same image undoes the empty alt, because a title still produces a name and the image announces after all. The scope is also wider than ornament. W3C frames this as images assistive technology should ignore, which takes in a photograph whose content the caption beside it already carries.
How we find it in an audit
Every image a scanner marks as having alt gets read by a person, because the question is not whether a value exists but whether that content deserves announcing. Decoration announced as decorative line final v2 is noise. A meaningful image carrying an empty alt is information deleted, and that direction is much harder to spot, since nothing on screen looks wrong. We check the title attribute on the same pass, because an empty alt and a filled title cancel each other out.
How affected users experience it
Every announced image costs listening time. On a page with twenty flourishes that all announce, somebody is hearing the wallpaper described between every sentence. An empty alt buys silence exactly where silence is right. The reverse costs more. A product photo marked as decoration is simply gone, and nothing tells the listener that anything was skipped.
Passes vs. fails
Passes
<img src="divider.svg" alt="">
<img src="flourish.png" alt="">Fails
<img src="divider.svg" alt="decorative-line-final-v2">
<img src="flourish.png" alt="" title="flourish">How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element marked as decorative is not exposedA tool can check this
- Image accessible name is descriptiveA tool finds candidates, you decide
- Image button has non-empty accessible nameA tool can check this
- Image has non-empty accessible nameA tool can check this
- Link has non-empty accessible nameA tool can check this
- Object element rendering non-text content has non-empty accessible nameA tool can check this
- SVG element with explicit role has non-empty accessible nameA tool can check this
- Image not in the accessibility tree is decorativeA tool can check this
Other ways to satisfy this rule
39 guides on this site are filed under 1.1.1 Non-text Content. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- ARIA6sufficientName icon-only controls with aria-label
- ARIA9sufficientAssemble one label from several text pieces
- ARIA10sufficientName images and charts with aria-labelledby
- ARIA15sufficientLink complex images to longer descriptions
- C9sufficientPut decorative images in CSS backgrounds
- G68sufficientDescribe the purpose of live-only streams
This guide is our interpretation of W3C technique H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.