| title | summary | socialImage | date | issue | tags | github | resources | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
What Is a Keyboard Trap? |
A keyboard trap is a phenomenon where you can’t escape from a context using the tab key. Your focus won’t move to the next focusable element. |
/img/social-thumbnails/what-is-a-keyboard-trap.png |
2022-09-13 |
11 |
|
|
A keyboard trap is a phenomenon where you can’t escape from a context using the tab key. Your focus won’t move to the next focusable element.
This behavior can be intentional - like when you open a modal and manage the focus from code, intentionally trap it inside a container - but can be accidental, totally breaking the keyboard accessibility.
Accidentally we usually create them when we make custom interactive components like a WYSIWYG editor where the tab key also has a meaning besides what it means in the global document scope.
The tab is an important key; using it, we can jump from focusable element to focusable element hence navigating the whole website or application. This type of navigation is popular next to exploring with the mouse.