Being able to navigate and operate all the functions of a web page or application using only keyboard commands is a key principle of accessibility. It is necessary for users with physical disabilities who cannot use a mouse, and also required for people who are blind and cannot see the mouse pointer on the screen.
Luckily, testing for keyboard operability is easy. It does not require any special technology or skill, just awareness of a few standard keyboard commands:
- Tab - Move to the next focusable element, such as a link or form field.
- Shift + Tab - Move backwards to the previous focusable element (if necessary).
- Up or Down Arrow - Move through options in a dropdown list, list box, or group of radio buttons, selecting them as you go.
- Alt + Down Arrow - Open a dropdown list to see and move through the options before selecting them.
- Spacebar - Check a checkbox or click a button.
- Enter - Click a link. (Enter may also work to click a button, but can have unexpected results.)
How to Test
To test, simply start at the top of the page, press the Tab key to move focus, and check that:
- All interactive elements (any that you can interact with using a mouse) receive keyboard focus. (WCAG 2.1.1)
- Focus moves between elements in a logical order (usually left to right, top to bottom). (WCAG 2.4.3)
- There are no unexpected changes (e.g., the page reloading) when elements receive focus. (WCAG 3.2.1)
- There is a visual indicator (e.g., outline) when each element has focus. (WCAG 2.4.7)
- Elements can be operated using standard keyboard commands (see above). (WCAG 2.1.1)
- There are no unexpected changes when element values are changed. (WCAG 3.2.2)
- Focus does not get trapped on any element (so that you cannot move focus to the next one). (WCAG 2.1.2)
The above commands work for standard web controls, however, web pages may include advanced elements such as accordions, grids, tree views, and more. Each advanced element must still follow a standard set of keyboard commands, which are specified at:
- ARIA Authoring Practices Guide (APG) Patterns - including Accordions, Carousels, Dialogs, Grids, Menus, Sliders, Tab Panels, Tree Views, and more
If any of these advanced controls are present, be sure to look up their keyboard commands (using the links above) and test them too.