WCAG 2.1.2: How to Fix Keyboard Trap Issues

Last updated: 2026-03-22

Level A Operable WCAG 2.1.2

What This Criterion Requires

WCAG 2.1.2 requires that if keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface. If moving focus requires more than standard Tab or Shift+Tab keys, or other standard exit methods, the user must be advised of the method for moving focus away. A keyboard trap occurs when a user navigates into a component or section of a page and cannot navigate out using the keyboard alone. Common keyboard traps include poorly implemented modal dialogs that do not allow pressing Escape to close, embedded third-party widgets like video players or maps that capture keyboard input, custom rich text editors that consume all keystrokes, and infinite tab loops within components. This criterion is critical because a keyboard trap effectively renders the entire page unusable for keyboard-only users, as they cannot move past the trapped element to access the rest of the content. The only recourse is to close the browser tab entirely.

Why It Matters

Keyboard traps are among the most severe accessibility barriers because they completely block users from navigating the page. When a keyboard user becomes trapped in a component, they cannot access any content that follows, cannot return to previous content, and cannot use the browser's own keyboard shortcuts effectively. This impacts all keyboard-only users including people with motor disabilities who cannot use a mouse, screen reader users who navigate by keyboard, power users who prefer keyboard navigation, and users with temporary disabilities such as a broken arm. Unlike many other accessibility issues that degrade the experience, a keyboard trap completely prevents access. Users trapped in a component have no choice but to close the tab and potentially lose any work in progress. This is especially problematic in forms where users have already entered data. Every interactive component must be designed so that keyboard users can enter and exit it freely using standard keyboard conventions.

Common Failures and How to Fix Them

Modal dialog without keyboard dismiss mechanism

A modal dialog opens and traps focus inside, but there is no way to close it with the keyboard. The close button may not be focusable, or the Escape key is not handled, leaving keyboard users stuck inside the modal.

Inaccessible 
<div class="modal" style="display: block;">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">X</span>
    <h2>Subscribe to our newsletter</h2>
    <input type="email" placeholder="Enter your email">
    <button onclick="subscribe()">Subscribe</button>
  </div>
</div>
<!-- Escape key not handled, close span not keyboard focusable -->
Accessible 
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <div class="modal-content">
    <button class="close" onclick="closeModal()" aria-label="Close dialog">X</button>
    <h2 id="modal-title">Subscribe to our newsletter</h2>
    <input type="email" placeholder="Enter your email">
    <button onclick="subscribe()">Subscribe</button>
  </div>
</div>
<script>
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeModal();
    }
  });
</script>

Embedded iframe widget that captures all keyboard input

An embedded third-party widget such as a map, video player, or code editor captures keyboard input and does not allow users to Tab out of the iframe back to the parent page.

Inaccessible 
<p>View our office location:</p>
<iframe src="https://maps.example.com/embed" width="600" height="400"></iframe>
<p>Contact us for more info.</p>
<!-- Keyboard focus enters the iframe and cannot exit -->
Accessible 
<p>View our office location:</p>
<div class="iframe-wrapper">
  <p><em>Press Escape to exit the map and continue navigating the page.</em></p>
  <iframe src="https://maps.example.com/embed" width="600" height="400" tabindex="0" title="Office location map"></iframe>
</div>
<p>Contact us for more info.</p>
<!-- Provide instructions and ensure the iframe is not the last focusable element -->

How to Test

  1. Navigate the entire page using only the Tab key and Shift+Tab key, verifying that you can move focus into and out of every interactive component without getting stuck.
  2. Open all modal dialogs, dropdown menus, and overlay panels and verify that pressing the Escape key closes them and returns focus to the triggering element.
  3. Test all embedded third-party widgets (maps, video players, social media embeds) to ensure keyboard focus can exit the widget using Tab or Escape.
  4. If any component requires a non-standard key to exit, verify that instructions are provided to the user before or upon entering the component.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria