• Success Criterion 1.1.1
  • Conformance level A

Decorative Image Wrongly Made Keyboard-Focusable

1.1.1 — Non-text Content

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Decorative image given a tabindex (keyboard-focus setting) or wrapped in a link with no accessible name (crosses into 2.4.4/4.1.2).

Example 

<img src="divider.png" tabindex="0">
<a href="#"><img src="filter-icon.png"></a>

Why it matters

A keyboard user tabbing through the filter bar lands on a divider that does nothing, or a filter link that announces nothing, unsure if it's broken.

How to test

Inspect decorative images for tabindex or a wrapping link: if a decorative image is focusable or clickable with no purpose, it fails.

How to fix

Remove tabindex from decorative images, and name any image wrapped in a link. A decorative image never needs to be focusable on its own.

<img src="divider.png" alt="">
<a href="#" aria-label="Open filters"><img src="filter-icon.png" alt=""></a>

Outcome

A keyboard user tabs straight to a link announced as "open filters," skipping the meaningless divider entirely.

Who is affected

Keyboard-only users and screen reader users navigating by Tab hit dead stops with no explanation.

Learn more

Related scenarios