- Success Criterion 1.1.1
- Conformance level A
- W3C reference F38
Decorative Image Not Hidden From Screen Reader Users
1.1.1 — Non-text Content
Scenario
Setting
A university's online course catalog
What’s wrong
A purely decorative image has no alt attribute and no role="presentation", so screen readers can't tell it should be ignored: they stop on it and may read out its file name.
Example
<!-- a swirl divider sits between every course listing -->
<img src="divider-swirl.png" width="600" height="24">Why it matters
A student scanning course listings by screen reader hits a meaningless announcement, such as the file name or just "image", between every single course, multiplying how long the page takes to get through.
How to test
Inspect each decorative image (borders, spacers, dividers) in DevTools: it needs alt="" (or role="presentation"). If it has no alt attribute and no role="presentation", it fails (F38). A descriptive alt such as "decorative swirl divider" fails too (F39), because screen readers still read it out.
How to fix
Add an empty alt (alt="") to the decorative image, with no title attribute (technique H67). An empty alt tells screen readers to skip the image entirely, exactly as a sighted user's eye does. Leaving the alt out is not the same thing: with no alt at all, screen readers can't tell the image is decorative. For pure decoration like this, you can also draw the divider with CSS instead (technique C9), so there's no img in the HTML at all.
<!-- a swirl divider sits between every course listing -->
<img src="divider-swirl.png" width="600" height="24" alt="">Outcome
A student reviewing 40 courses moves from one straight to the next with no interruptions.
Who is affected
Screen reader users navigating long lists are the ones who pay, in time and attention, for every unnecessary announcement.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Failure F38: Not marking up decorative images so assistive technology can ignore them (opens in a new tab)
- Technique Technique H67: Null alt text and no title attribute on decorative images (opens in a new tab)
- Technique Technique C9: Using CSS to include decorative images (opens in a new tab)
Related scenarios
- Product Photo Added as a CSS Background With No Alt Text
- Chart Alt Text That Never Explains What Each Color Means
- Outdated Alt Text That No Longer Matches the Image
- Alt Text Left as a Filename Instead of a Real Description
- Decorative Image Given Alt Text Instead of Being Marked Silent
- Images Published With No Alt Attribute at All