For users who rely on keyboards to get around, this kind of roadblock can make the entire website unusable.
No Keyboard Trap ensures that users can move freely through every part of a webpage using only the keyboard, with no hidden traps.
Who this impacts
- People with motor impairments: They depend on keyboard navigation, and getting trapped in a single element makes the site impossible to use.
- People using screen readers: Navigating web content requires keyboard commands, so keyboard traps can make essential content inaccessible.
- People with cognitive impairments: Smooth keyboard navigation without getting stuck is crucial to avoiding confusion and frustration.
- Anyone without a working mouse: Even in everyday situations, like a mouse running out of battery, smooth keyboard navigation keeps the site functional.
- Everyone: Whether due to a broken mouse or personal preference, anyone might need to rely on keyboard navigation, and getting trapped limits usability.
How to meet No Keyboard Trap
- Make sure all elements are accessible by keyboard: Users should be able to enter and exit any interactive element (like forms, modals, or pop-ups) using only the keyboard.
- Test for keyboard navigation throughout: Check that users can freely navigate into and out of all areas, including forms, dropdowns, and modals, without getting stuck or needing to use a mouse.
- Provide clear focus transitions: When moving between elements using keyboard navigation, ensure there is a visible focus indicator so users know where they are.
Practical example
An online store ensures that customers can fill out forms, interact with product filters, and exit pop-ups using only their keyboard, with clear focus indicators and no keyboard traps.
Exceptions
For elements where requiring keyboard navigation would invalidate the purpose (such as complex design tools or interactive games), exceptions may apply, but only if fully justified. Cookie banners are one of the only acceptable cases for a focus trap, because in some locations, a site owner needs an answer, and cookie banners without focus traps forcing interaction may end up with focus states obscured by the banner. See WCAG 2.4.11 and WCAG 2.4.12.
Top tips
- Test your site with just a keyboard: Make sure all elements, including forms, links, and modals, can be accessed and exited without getting stuck.
- Allow for easy exits: Make sure pop-ups, modals, and forms can all be exited using keyboard commands like the Esc key or a close button.
- Provide a clear focus indicator: Make sure the user always knows where they are on the page while using keyboard navigation.