Start scanning free

( Operable / WCAG 2.4.3 )

Element in the focus order has no matching interactive role

This check maps to Focus Order. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Minor Level A WCAG 2.4.3 — Focus Order

What’s wrong

An element is reachable by Tab (it has tabindex="0" or similar) but has no role that explains why it’s focusable, like role="presentation" on something in the tab order.

Why it matters

Keyboard users land on the element and get no indication of what it does or why it received focus. It wastes a Tab stop and adds confusion to every pass through the page.

How to fix it

Either give the element an appropriate interactive role, or remove it from the tab order if it isn’t meant to be interactive.

Before
<div tabindex="0" role="presentation">Card</div>
After
<div role="button" tabindex="0" aria-label="Open card details">Card</div>

Learn more