Keyboard Accessible
All functionality must be operable with keyboard alone — Tab, Shift+Tab, Enter, Space, Escape, Arrow keys. No keyboard traps. Affects motor-disability users, switch users, power users, and screen reader users.
Everything must work using the keyboard alone — no step should need a mouse. Essential for people who can't use one.
WCAG 2.1.1 (Level A) requires all functionality to be operable through a keyboard interface. WCAG 2.1.2 adds that there must be no keyboard traps — users must be able to move focus away from any component using standard keys.
Common failures: custom dropdowns that don't respond to arrow keys, drag-only interfaces, hover-only tooltips, click handlers on non-focusable elements, and modal dialogs that don't trap or return focus.
Why this matters
Keyboard access is foundational — it affects motor-disability users, switch device users, screen reader users, power users, and anyone with a broken mouse. If it doesn't work with a keyboard, it doesn't work for a significant portion of your audience.
How to detect
Tab through the entire page without touching the mouse. Can you: reach every interactive element? Activate every button and link? Navigate into and out of every widget? See where focus is at all times? Are there any keyboard traps?
How to fix
<!-- Use native interactive elements --> <button onclick="save()">Save</button> <!-- ✓ keyboard-free --> <div onclick="save()">Save</div> <!-- ✗ not focusable --> <!-- If you must use a div, add ALL required attributes --> <div role="button" tabindex="0" onclick="save()" onkeydown="if(event.key==='Enter'||event.key===' ')save()"> Save </div>