- Success Criterion 1.1.1
- Conformance level A
Meaningful Image Hidden From Screen Readers by Mistake
1.1.1 — Non-text Content
Scenario
Setting
A hotel booking site's room-selection page
What’s wrong
aria-hidden (code hiding content from screen readers) applied to informative images (content perceivable visually but removed from assistive technology).
Example
A QA pass on a hotel booking site's room-selection page turns this up: aria-hidden (code hiding content from screen readers) applied to informative images (content perceivable visually but removed from assistive technology).
Why it matters
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. The practical effect on a hotel booking site's room-selection page: they can't tell what the image or video is showing.
How to test
Inspect informative images for aria-hidden="true" in DevTools: if present on an image that conveys real information, it incorrectly hides it from screen readers and fails.
How to fix
Remove aria-hidden (code hiding content from screen readers) from informative images and give them proper alt text.
Outcome
That one change on a hotel booking site's room-selection page means they get the same information as everyone else.
Who is affected
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning.
Learn more
- Understanding Understanding document (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 Not Hidden From Screen Reader Users
- Decorative Image Given Alt Text Instead of Being Marked Silent