- 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 is not marked as decorative, so screen readers stop on it and announce something useless.
Example
<img src="divider-swirl.png" alt="decorative swirl divider">Why it matters
A student scanning course listings by screen reader hits a meaningless announcement between every single course, multiplying how long the page takes to get through.
How to test
Inspect the image's alt attribute: decorative images (borders, spacers, dividers) must have alt="" or role="presentation" — if a screen reader announces anything for it, it fails.
How to fix
Give a genuinely decorative image an empty alt, not a description of the decoration. An empty alt tells screen readers to skip the image entirely, exactly as a sighted user's eye does.
<img src="divider-swirl.png" 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 Related technique (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