WCAG 2.1.2: No Keyboard Trap
If keyboard focus can be moved to a component, focus must be able to be moved away using only a keyboard. Users must never get trapped in a widget, modal, or embedded content where they cannot Tab or Escape out.
What is WCAG 2.1.2 No Keyboard Trap?
WCAG 2.1.2 No Keyboard Trap is a Level A web accessibility success criterion under the Operable principle. If keyboard focus can be moved to a component, focus must be able to be moved away using only a keyboard. Users must never get trapped in a widget, modal, or embedded content where they cannot Tab or Escape out. Common failures include modal dialogs that trap focus without an escape key handler and embedded widgets (maps, video players) that capture tab key. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Tab through all interactive elements and verify you can move past each one
- ✓ Open modal dialogs and verify Escape closes them or Tab cycles within them
- ✓ Test embedded content (iframes, video players) to verify focus can leave
- ✓ Check that auto-focus scripts do not trap focus in a loop
- ✓ Verify rich text editors and code editors allow Tab to leave the component
Common Failures
- ✗ Modal dialogs that trap focus without an Escape key handler
- ✗ Embedded widgets (maps, video players) that capture Tab key
- ✗ Auto-focus loops that return focus to the same element
- ✗ Custom dropdown menus that prevent focus from moving past them
- ✗ Rich text editors that consume all keyboard events
✓ Good Example
<!-- Modal with proper focus trap and escape -->
<div role="dialog" aria-modal="true" aria-label="Confirm action">
<h2>Confirm Delete</h2>
<p>Are you sure you want to delete this item?</p>
<button onclick="closeModal()">Cancel</button>
<button onclick="confirmDelete()">Delete</button>
</div>
<script>
// Focus cycles within modal, Escape closes it
dialog.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
</script> The modal uses aria-modal to indicate focus containment, includes focusable buttons, and handles the Escape key to close the dialog and return focus.
✗ Bad Example
<!-- Modal with no escape mechanism -->
<div class="modal" style="position: fixed; inset: 0;">
<div class="modal-content">
<p>You must complete this form.</p>
<input type="text" autofocus>
<button onclick="submitForm()">Submit</button>
</div>
</div> The modal has no Escape key handler and no close button. If the overlay prevents clicking outside, keyboard users are trapped. There is no way to dismiss without completing the form.
Test Your Site for 2.1.2 Compliance
Use our free accessibility tools to check your website against WCAG 2.1.2.
Open Testing Tool