• Success Criterion 2.4.3
  • Conformance level A

Decorative Element Wrongly Given a Keyboard Tab Stop

2.4.3 — Focus Order

Scenario

Setting

A weather app's forecast screen

What’s wrong

Non-interactive text or decorative graphics given tabindex (keyboard-focus setting), inserting meaningless focus stops.

Example 

<div class="weather-icon-decor" tabindex="0" onmouseover="animate(this)">
  Sun icon
</div>
<p>72 F and sunny</p>

Why it matters

Tabbing through the forecast, the user lands on a purely decorative sun icon that announces nothing and does nothing, before ever reaching the temperature.

How to test

Tab through the page: if non-interactive text or decorative graphics receive focus for no reason, it fails.

How to fix

Reserve tabindex="0" for elements a keyboard user actually needs to operate.

<div class="weather-icon-decor" aria-hidden="true">Sun icon</div>
<p>72 F and sunny</p>

Outcome

A user tabs straight from one forecast's temperature to the next, skipping decorative icons entirely.

Who is affected

Keyboard and screen reader users hit a meaningless focus stop on every forecast card, slowing down navigation.

Learn more

Related scenarios