This page is in progress -
Why This is Important
A keyboard trap means you’re stuck on a component and can’t get out using just the keyboard. This is inaccessible to people who rely on keyboards.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.
Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.
Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.
In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.
If keyboard users encounter a keyboard trap, they might never be able to get out of it using the keyboard alone. While switching over to the computer mouse is an option to some, others might not be able to see where to click or know where to click without accidentally causing an error. This can lead to confusion and frustration.
This references to WCAG criterion 2.1.2 No Keyboard Trap (Level A).
Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.
How to Implement This
A common example of a keyboard trap is a calendar date picker that does not allow the user to exit because it traps them into tabbing through the dates forever.
It’s important to provide a keyboard focusable button to allow the user to exit the component and move on to the next thing.
Here is an open-source version of the Duet Date Picker, which provides a close button. Here are some other recommendations and articles from Digital A11y.
How to Test This
- Starting from the top, manually tab through all the elements on the website/app
- Make sure you can return back to the top. If not, note where you are getting stuck
Credits
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.