Keyboard traps: what they are, how to reproduce them, and how to fix them

#webdev #a11y #html

Definition of a keyboard trap according to WCAG 2.1 SC 2.1.2:

“If keyboard focus can be moved to a component using a keyboard interface, then focus can be moved away from that component using only a keyboard interface.”

Why can’t static accessibility tools detect it?

Because detecting a keyboard trap requires actual keyboard navigation — typically using the Tab key.

Real case (educational platform):

The login form contained a keyboard trap. When users activated the “Login” button with empty required fields, keyboard focus was completely lost. Keyboard only users could no longer identify where to continue.

Problematic HTML:

<input type="submit" name="commit" value="Entrar" class="btn btn-xchool btn-block mt-4" data-disable-with="Enviando...">

Solution:

Programmatically move focus to the error message’s “Close” button using focus().

Tested with Chrome + NVDA.