Ensure there are no keyboard traps
Applicable Role(s): Developer
Overview
A user that navigates by keyboard, speech recognition, or other assistive technology needs a way to be able to navigate out of a piece of web content. If the user requires a mouse to get away from the content, this can block content from users or force them to refresh the page to escape.
Best Practices
- Tab stops should let the user navigate out of a widget or subsection of content.
- If needed, a control should be provided to let the user jump out of the widget or content.
- If the website or app requires a complex keyboard behavior, or otherwise can trap users, instructions on how to get out should be provided.
Pattern Examples
The following video shows a series of links. On the last link "disable" link, if a user is tabbing through the page, the focus gets trapped and makes the user cycle through the list of links over and over.
(Note: audio described video and transcript follow the first video).
Audio Described Version
Transcript
Four links are focused on and highlighted in sequence. The same links are focused on over and over, without moving to other sections of the page. This creates a keyboard trap.