Testing with a keyboard is an essential part of any accessibility evaluation.
To be keyboard accessible a web page must not only be keyboard operable it must also incorporate the following: a visible keyboard focus, appropriate tab order, and avoid keyboard traps.
| Interaction |
Keystrokes |
Notes |
| Navigate to interactive elements |
- Tab - navigate forward
- Shift + Tab - navigate backward
|
- Keyboard focus indicators must be present.
- Navigation order should be logical and intuitive.
|
| Link |
- Enter - activate the link
|
|
| Button |
- Enter or Spacebar - activate the button
|
Ensure elements with ARIA role="button" can be activated with both key commands. |
| Checkbox |
- Spacebar - check/uncheck a checkbox
|
Users can typically select zero, one, or multiple options from group of checkboxes. |
| Radio buttons |
- Spacebar - select the focused option (if not selected)
- ↑/↓ or ←/→ - navigate between options
- Tab - leave the group of radio buttons
|
Users can select only one option from a group of radio buttons. |
| Select (dropdown) menu |
- ↑/↓ - navigate between options
- Spacebar - expand
- Enter/Esc - select option and collapse
|
You can also filter or jump to options in the menu as you type letters. |
| Autocomplete |
- Type to begin filtering
- ↑/↓ - navigate to an option
- Enter - select an option
|
|
| Dialog |
|
- Modal dialogs should maintain keyboard focus.
- Non-modal dialogs should close automatically when they lose focus.
- When a dialog closes, focus should usually return to the element that opened the dialog.
|
| Slider |
- ↑/↓ or ←/→ - increase or decrease slider value
- Home/End - beginning or end
|
- For double-headed sliders (to set a range), Tab/Shift + Tab should toggle between each end.
- In some sliders PageUp/PageDown can move by a larger increment (e.g., by 10%).
|
| Menu bar |
- ↑/↓ - previous/next menu option
- Enter - expand the menu (optional) and select an option.
- ←/→ - expand/collapse submenu
|
- A menu bar dynamically changes content within an application. Links that utilize Tab/Enter are NOT menu bars.
|
| Tab panel |
- Tab - once to navigate into the group of tabs and once to navigate out of the group of tabs
- ↑/↓ or ←/→ - choose and activate previous/next tab.
|
- This is for 'application' tabs that dynamically change content within the tab panel. If a menu looks like a group of tabs, but is actually a group of links to different pages, Tab and Enter are more appropriate.
|
| 'Tree' menu |
- ↑/↓ - navigate previous/next menu option
- ←/→ - expand/collapse submenu, move up/down one level.
|
|
| Scroll |
- ↑/↓ - scroll vertically
- ←/→ - scroll horizontally
- Spacebar/Shift + Spacebar - scroll by page
|
The space bar will, by default, scroll the page, but only if an interactive control that allows space bar input is not focused. Horizontal scrolling within the page should be minimized.
|
a11ychecks