ReferenceBeginner3-5 min reference
Keyboard Testing
The single highest-value accessibility test is also the cheapest: unplug the mouse and operate the whole UI with the keyboard. Anything you can't reach or activate is a defect for keyboard and screen-reader users alike. This sheet is the key map and the checklist; pair it with the WCAG and ARIA Roles sheets linked below.
The keys
| Key | Should |
|---|---|
Tab / Shift+Tab | Move forward / back through interactive elements |
Enter | Activate links and buttons |
Space | Activate buttons, toggle checkboxes |
Arrow keys | Move within a composite widget (radios, menus, tabs, sliders) |
Esc | Close a modal, menu, or popover |
Home / End | Jump to start/end in lists, menus, sliders |
The checklist
- Reach everything: every link, button, field, and control is focusable.
- Visible focus: a clear focus ring follows you (WCAG 2.4.7).
- Logical order: focus follows reading order, not DOM accidents (2.4.3).
- No trap: you can Tab out of every widget, including modals and embeds (2.1.2).
- Modals: focus moves into the dialog on open, is trapped inside, and returns to the trigger on close.
- Skip link: a "skip to content" link appears on first Tab.
- No mouse-only: hover menus, drag-drop, and custom widgets have keyboard equivalents.
Common mistakes
div/spanused as buttons with notabindexor key handler — unreachable.- Focus ring removed in CSS (
outline: none) with nothing replacing it. - Focus order driven by positive
tabindexvalues (avoid them). - Modal opens but focus stays on the page behind it.
- Custom dropdowns operable only by click.
// Related resources