Making sure your site or application works with the keyboard alone helps people who either cannot or prefer not to use a mouse. Sometimes, these people have disabilities, but sometimes, they may not. They may simply prefer to use the keyboard, when possible, or they may use a screen reader, voice input, or other assistive technologies to navigate and activate buttons, links, or the like.
When implementing keyboard access and then testing it, it is critical to consider Focus Management, too. These two go hand in hand. Generally, you will want to be sure that buttons, links, and form fields can all be reached using the keyboard, that focus is visible and maintained as expected, and that items are encountered in the intended order.
Situations to Keep in Mind
Using native HTML, whenever possible, will provide built-in keyboard functionality. Examples include links and buttons. When this is not possible, such as in web applications where existing frameworks are used with <div>s and <span>s, you will need to include appropriate Javascript and apply Aaccessible Rich Internet Applications (WAI-ARIA) roles, states, and properties to assure that this functionality is available.
Also, take care to avoid "keyboard traps," such as when implementing modal dialogs. The user must be able to enter the modal with the keyboard, navigate only within it (while it is on screen), and use the escape key to close it.
How to Test with the Keyboard
Before testing, if you are a Mac user, make sure that your Mac is set up to work with the keyboard as expected. See Keyboard Navigation in Mac Browsers for details.
When you are ready to test, try using the tab and shift-tab keys to navigate to links, buttons, and form fields. Use up and down arrow keys to select a radio button, and use the spacebar to check boxes. Be sure that either enter or space will activate a button, such as when submitting a form. Spacebar should also be used with a media player to play or pause audio or video content.
For information about expected keyboard behavior with more complex widgets, as well as a handy table of expected keystrokes for action and navigation, see WebAIM's articles on Keyboard Accessibility.
Here are some videos to help make keyboard access and focus management clear:
- Using the tabindex attribute for keyboard accessibility - html5 Video Tutorial (video via EggheadIO)
- Keyboard Compatibility (video via the Web Accessibility Initiative
Bibliography
Four success criteria are relevant to keyboard-only interaction, based on WCAG 2.0 AA conformance. References below are to the supporting document, Understanding WCAG 2.0.: