No Keyboard Trap
Success Criterion 2.1.2 (Level A)
If keyboard focus can be moved from the main web page content into a component of the page, can the focus also be moved away from the component using only the keyboard?
Why is this important
Some users with visual or physical impairments may not be able to use pointing devices, such as a mouse. These users need to be able to access content and navigate using keystrokes, such as the tab key, arrow keys or other keyboard commands.
When users navigate into a component with their keyboard, if they cannot interact with and exit the component using only the keyboard they become stuck. This is called a “keyboard trap.”
Whom does it benefit?
As a person who is blind and cannot use a mouse,
I want to use my screen reading software with keyboard commands
so that I can interact with digital content.
As a person with a spinal cord injury who has severe fine
motor impairments and cannot use amouse,
I want use a mouth stick to type on a keyboard
so that I navigate through web sites and complete work online.
What should you do?
- Ensure that all content and components that a user must interact with are keyboard navigable.
- Ensure that when keyboard focus is in a component of the site or application that the user can navigate away from that component using only keyboard keystrokes.
- Provide explicit instructions to the user if non-standard exit methods must be used to move away from (out of) a component.
How do you do it?
- For every interaction that can be controlled by a mouse, test that it can also be controlled by a keyboard command.
- Make sure that all interactions within components are put into the correct tab order when the content is active. For example, all fields and buttons in a modal dialog box need to be in the appropriate tab order when the modal is active.
- Even for content that will run on devices that don’t normally have keyboards (phones iPads, etc.), ensure that the interface can be controlled with keystrokes to support users who attach external keyboards.
When using non-standard entry and exit methods for web components,
provide clear instructions on how to enter into, navigate through and
exit from these areas using the keyboard.
- These instructions should be provided before entering the component area and should also be available while the user is in the component area.
Need technical guidance?
Additional Resources to help you:
- Keyboard Accessibility - WebAIM Keyboard Accessibility
- Keyboard Compatibility - W3C, Web Accessibility Initiative
- What are keyboard traps? - Nomensa, Humanising Technology Blog
- Article: What are Keyboard Traps? - by Siteimprove, author Keith Bundy
- Designing for Keyboard Accessibility - University of Washington Accessible