• 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 

<img src="room-layout.png" aria-hidden="true">
<!-- the image shows the actual room floor plan, real decision-relevant information -->

Why it matters

A guest deciding between rooms can't compare layouts if the floor-plan image is invisible to their screen reader entirely, unlike a sighted guest who sees it clearly.

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

Reserve aria-hidden for truly decorative content, and give informative images real alt text instead. aria-hidden on an informative image hides it completely, worse than a bad alt would.

<img src="room-layout.png" alt="Room layout: king bed, work desk by window, walk-in shower">

Outcome

A guest hears the room's layout described and books with the same information a sighted guest has.

Who is affected

Blind and low-vision guests comparing room options before booking are cut off from information sighted guests see freely.

Learn more

Related scenarios