Overview
Many users are physically unable to use a mouse, and might be navigating through the page using keyboard alone. Testing a website with keyboard requires no special tools or skills - just try navigating your website or using your program using the keyboard only; don't touch the mouse. Many users are physically unable to use a mouse, and might be navigating through the page using keyboard alone. Testing a website with keyboard requires no special tools or skills - just try navigating your website or using your program using the keyboard only; don't touch the mouse.
Techniques
Be sure each of the following items is true of your web page:
- All links and controls on the web page can be accessed using the Tab key on the keyboard.
- It is always visibly apparent which element has focus. For additional information about this issue, see Providing Visible Focus for Keyboard Users.
- All rich, interactive features of the web page (e.g., dropdown menus, carousels, modal dialogs) comply with the recommendations of the W3C’s WAI-ARIA 1.0 Authoring Practices, specifically with their Design Patterns for particular widgets. These standard recommended design patters include specific models for how widgets should be operable with keyboard, and were determined through a collaborative effort involving many stakeholders.
- Avoid using apps, plugins, widgets, or JavaScript techniques that trap the keyboard. Users should be able to into and out of any user interface element. Apps built using Adobe Flash are particularly notorious for trapping keyboard users.
Testing
Use your keyboard to navigate between all links, buttons, form fields, and other features. Current focus should be reasonably easy to see. The order of movement within the page or modal should echo the visual layout. As you do this, consider these questions:
- Can you access all features?
- Can you operate all controls?
- Is it reasonably easy to tell where you are on the page?
- Does the focus wrap within the entire page or modal dialog?
Common Keys Used in Keyboard Operation of Web Pages and Web-based Applications
- Tab – move to the next link, form element or button.
- Shift+Tab – move to the previous link, form element, or button.
- Enter – activate the current link or button.
- Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus.
- Up/Down arrow keys – move between radio buttons or, in some cases, menu links.
- Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.
- Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.
Additional keystrokes are defined for particular widgets within the W3C WAI-ARIA Authoring Practices Design Patterns.
External WCAG References
Most Details from this page were gleaned from the University of Washington's Accessible Technology section.