Keyboard Trap

A keyboard trap occurs when focus enters a component on the page and can no longer exit using standard keys (Tab, Escape, arrows). The user is stuck: impossible to continue without a mouse. WCAG criterion 2.1.2 (level A) prohibits this situation.

You open a modal, press Tab to reach the "Close" button. Nothing. Tab again. Focus loops between two elements inside. Impossible to escape.

For a user who cannot use the mouse, the only remaining option is to reload the page.

#What WCAG Prohibits

The WCAG 2.1.2 criterion (level A) sets a simple rule: if focus can enter a component, it must be able to exit using the keyboard. If the exit requires something other than Tab or arrow keys, the user must be informed in advance.

This criterion is part of the non-interference requirements: even content exempted from accessibility cannot create a keyboard trap. It is one of four criteria that all web content must meet, without exception.

#Most Common Causes

Keyboard traps rarely come from native HTML. It is custom components that pose a problem:

  • Modals in <div> without keyboard management: focus enters the modal, but no close button is reachable via keyboard
  • Third-party widgets (carousels, video players, WYSIWYG editors) that intercept keyboard events without returning them
  • Infinite scroll that forces tabbing through hundreds of elements before reaching the next content

The RGAA developer guide emphasizes: verify that each interactive component allows tabbing to the next element and the previous element.

#Focus Confinement and Trap: The Distinction

Confining focus within an open modal is not a trap. It is expected behavior, provided the user can close the modal (Escape key, close button accessible via keyboard).

The HTML element <dialog> handles this confinement natively with showModal(). The browser prevents focus from leaving the modal, and Escape closes it. No additional JavaScript needed for focus trapping.

If you are still building your modals with <div>, that is where traps are created.

#In Summary

Test via keyboard: enter each interactive component with Tab, and verify that you can exit without a mouse. Use <dialog> for your modals. And if a component requires a non-standard key to exit, display this information to the user.

Back to glossary
Share this article

Learn more

Keyboard Navigation

Keyboard navigation refers to the ability to browse and use a web interface using only keyboard keys, without a mouse. It is the primary mode of interaction for people who cannot use a pointing device, and a basic test to verify a website's accessibility.

Focus

Focus refers to the state of a web page element when it receives keyboard attention. A visual indicator, often an outline, signals which element is active. Without this indicator, keyboard navigation becomes impossible.

Keyboard Accessible and Activatable

A component is « keyboard accessible » when you can select it with Tab, and « activatable » when you can trigger its action with Enter or Space. Native HTML elements like <a>, <button> and <input> are by default. A <div> with an onclick, is not.