Testing for Keyboard Accessibility
- Christina Lutz-Hatfield
Table of Contents
Overview
Keyboard accessibility is one of the most important aspects of web accessibility.
Many users with motor disabilities rely on only using a keyboard to access online content. These are users who are unable to use a mouse.
Screen reader users who are blind or vision impaired will also use the keyboard to access and interact with content.
Make all functionality available from a keyboard.
Ensure that content can be operated through a keyboard or keyboard interface (so an alternate keyboard can be used).
When content can be operated through a keyboard or alternate keyboard, it is operable by people with no vision (who cannot use devices such as mice that require eye-hand coordination) as well as by people who must use alternate keyboards or input devices that act as keyboard emulators.
It’s important to perform a manual test using only a keyboard to access online content and functionality.
Common Keystrokes and Interactions
Interaction | Keystrokes | Notes |
Navigate to most elements | Tab Shift + Tab - navigate backward |
|
Link | Enter |
|
Button | Enter or Spacebar | Ensure elements with ARIA role="button" can be activated with both key commands. |
Checkbox | TAB - Use the tab key to navigation between checkboxes Spacebar - check/uncheck a checkbox | Checkboxes should be used when one or more options can be selected. |
Radio buttons | ↑/↓ or ←/→ - select an option. Tab - move to the next element. | Radio buttons should be used when only one option from a group can be selected. |
Select (dropdown) menu | ↑/↓ - navigate between menu options Spacebar - expand | You can also filter by typing letters, but this behavior varies by browser. Some will filter as you type, like autocomplete. Others will only sort by first letter. E.g., in a list of US States, hitting A then R may take you to Arizona, or it may take you to Alabama and then Rhode Island. |
Autocomplete | Type to begin filtering ↑/↓ - navigate to an option Enter - select an option |
|
Dialog | Esc - close |
|
Slider | ↑/↓ or ←/→ - increase or decrease slider value Home/End - beginning or end |
|
Menu bar | ↑/↓ - Previous/next menu option Enter - expand the menu (optional) and select an option. ←/→ - expand/collapse submenu |
|
Tab panel | Tab - once to navigate into the group of tabs and once to navigate out of the group of tabs ↑/↓ or ←/→ - previous/next tab. |
|
'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 | Minimize horizontal scrolling.
|
Keyboard Testing on a MAC:
Configure macOS/OS X for Keyboard Accessibility https://webassign.net/manual/student_guide/t_a_osx_tab_config.htm
By default, macOS™/OS X® is not configured to use the TAB key to navigate to all items in your browser. If you are using Apple® Safari®, you also need to configure it to use TAB to navigate to all items on the page.
Configuration is also needed for Firefox on macOS
Configuration is not needed for Chrome on macOS
Keyboard Accessibility Guide
Please see our Keyboard Accessibility Guide on how to make your content and functionality fully accessible to screen reader and keyboard users.
WCAG Related Guidelines
2.1.2 No Keyboard Trap (Level A)
2.1.4 Character Key Shortcuts (Level A)
1.3.2 Meaningful Sequence (Level A)
1.4.11 Non-Text Contrast (Level AA)