WCAG 2.1 · Level A · Operable
WCAG 2.1.1 — Keyboard, explained with examples
Every interactive function on the page must be operable using only the keyboard. Mouse-only interaction excludes anyone using a screen reader, switch device, voice control, or who has tremor or limited mobility. Keyboard support is the prerequisite for almost every other assistive technology.
- Number
- 2.1.1
- Level
- A
- Principle
- Operable
- Guideline
- 2.1 Keyboard Accessible
Why this criterion exists
Mouse-only interaction excludes anyone using a screen reader, switch device, voice control, or who has tremor or limited mobility. Keyboard support is the prerequisite for almost every other assistive technology.
If you only remember one thing: every interactive function on the page must be operable using only the keyboard. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Keyboard affects:
Screen reader users
Users with motor impairments
Users who prefer keyboard for speed (developers, power users)
Voice control users (relies on keyboard pathways)
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Custom dropdowns implemented with click handlers and no keyboard
<div onclick="..."> instead of <button>
Hover-only menus that never receive focus
Drag-and-drop interactions without keyboard alternative
How to test for it
Tab through the entire page; every control must be reachable.
Activate each control with Enter or Space.
Trigger menus with Arrow keys; close with Esc.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
<button> gives you free Enter/Space activation, focus visibility, and the right ARIA role. Reach for native elements before custom roles.
The problem
<div onclick="open()">Open menu</div>The fix
<button type="button" onclick="open()">Open menu</button><button> gives you free Enter/Space activation, focus visibility, and the right ARIA role. Reach for native elements before custom roles.
Frequently asked questions
Are mouse-only games subject to 2.1.1?
Yes. WCAG allows mouse-required interaction only when the activity fundamentally cannot be done with a keyboard (e.g., free-form drawing) — and even then, an alternative path is required.
Other Operable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.