SC 2.1.1: Keyboard
Normative Text
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
Understanding 2.1.1
Everything a mouse user can do, a keyboard user must also be able to do. No functionality should require a mouse.
How to Comply
Use native HTML interactive elements (<a>, <button>, <input>, <select>) which are keyboard-accessible by default. For custom components (dropdown menus, date pickers, carousels, drag-and-drop), implement keyboard interaction patterns from the ARIA Authoring Practices Guide. Test all interactive functionality using only the Tab, Arrow, Enter, Escape, and Space keys. The exception is for inherently path-based functions like freehand drawing.
Common Failures
- ✕Mouse-only click handlers on <div> and <span> elements with no keyboard equivalent
- ✕Drag-and-drop reordering with no keyboard alternative
- ✕Context menus that only open on right-click with no keyboard trigger
- ✕Custom carousels with no keyboard navigation
- ✕Maps with drawing tools that require mouse movement
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.2.1.1.
- ★Backward compatible with WCAG 2.1: Yes.
Mandatory Under
Testing with Keyboard only
- 1.
Disconnect or ignore the mouse entirely.
- 2.
Press Tab to navigate through all interactive elements on the page.
- 3.
Verify every interactive element (links, buttons, inputs, custom widgets) receives keyboard focus.
- 4.
Verify Enter activates links and buttons. Verify Space activates buttons.
- 5.
Verify all dropdown menus, modals, and accordions can be opened, operated, and closed with keyboard only.
- 6.
Verify Shift+Tab navigates in reverse order.
- 7.
Check for keyboard traps: verify you can Tab out of every component.
- 8.
Pass: All functionality accessible via keyboard without requiring a mouse.