logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 2.2 - No Keyboard Trap

A developer created a custom textarea which supports the use of the tab key to insert a tab character.
Keyboard users expect to use the tab key to change the focus to the next element of a webpage. Screen reader users are also dependent on this functionality to navigate around.

The textarea that the developer created, traps the focus inside the textarea. Despite the fact that they added a "kill" switch with the use of the Esc key, website users do not expect this key to untrap the keyboard.
An explicit instruction is required to advise the user!

Requirements

Pending requirement:

When trapped inside the editor, there are instructions on screen which infom the user that the "Esc" key untraps the keyboard.

Pending requirement:

When a screen reader user focuses on the editor, they hear the instruction regarding the usage of the Esc key. This can be achieved by referencing the instructions with aria-describedby or by including the instructions in the <label>.

Need help?

Show me the solution

Learning Material

logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 2.2 - No Keyboard Trap

A developer created a custom textarea which supports the use of the tab key to insert a tab character.
Keyboard users expect to use the tab key to change the focus to the next element of a webpage. Screen reader users are also dependent on this functionality to navigate around.

The textarea that the developer created, traps the focus inside the textarea. Despite the fact that they added a "kill" switch with the use of the Esc key, website users do not expect this key to untrap the keyboard.
An explicit instruction is required to advise the user!

Requirements

Pending requirement:

When trapped inside the editor, there are instructions on screen which infom the user that the "Esc" key untraps the keyboard.

Pending requirement:

When a screen reader user focuses on the editor, they hear the instruction regarding the usage of the Esc key. This can be achieved by referencing the instructions with aria-describedby or by including the instructions in the <label>.

Need help?

Show me the solution

Learning Material

Editor

Preview Page