Do not leave decorative images announced
F38 is a documented failure under the non-text content rule, and its current wording carries a second route through it that most summaries, our own old one included, do not. A decorative image has to be ignorable by assistive technology, and there are two ways to make it so. An empty alt attribute does it. So does a presentation role. The failure needs both to be absent, which is why a missing alt attribute on its own is not automatically F38. That matters for how you read a scanner report. Every tool flags the missing attribute, and the tool is not wrong about the attribute. It is just not the same as being right about the failure. The other repair is to stop shipping the image in markup at all, because pure decoration belongs in CSS, where nothing has to decide whether to announce it.
How we find it in an audit
Automated scans list every img with no alt attribute, quickly and reliably, and that list is the start rather than the finding. A reviewer sorts it by purpose, because the same missing attribute is a serious defect on an informative image and a smaller one on a flourish. We read the role attribute at the same time, since an image already carrying a presentation role is ignorable and belongs in neither bucket.
How affected users experience it
Decorative images with no alt attribute get announced by their filename, so the reader hears "corner flourish v 2 dot p n g, graphic" in the middle of a sentence. One is a distraction. On a template using eight of them per page it becomes the page, and finding the actual content means listening past a list of asset names. Someone reading with a braille display pays for it in space, because every one of those filenames takes up the line they were reading.
Passes vs. fails
Passes
<img src="corner-flourish-v2.png" alt="">
<img src="corner-flourish-v2.png" role="presentation">
<!-- Either one works. Better still, move pure decoration into CSS. -->Fails
<img src="corner-flourish-v2.png">
<!-- No alt attribute and no role. Nothing tells anyone to ignore it. -->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
The other techniques filed under this rule
39 guides on this site are filed under 1.1.1 Non-text Content. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- 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 F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them. 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.