Interactive elements must be reachable by keyboard

Rule keyboard-reachable · Component patterns (best practice) · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A control that can be clicked but never receives keyboard focus is unusable without a mouse. The engine Tabs through the page and flags focusable, rendered controls that the Tab sequence never reached.

How to fix#

Make interactive elements natively focusable (use <a>/<button>/form controls) or give them tabindex="0", and do not remove them from the Tab order with tabindex="-1" unless focus is managed another way.

Example#

<div role="button" onclick="buy()">Buy</div>

<button onclick="buy()">Buy</button>

WCAG success criteria#

2.1.1 Keyboard — Level A#

All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• WCAG — Keyboard