CRITICALWCAG 2.1.2 A
Keyboard Trap
A focusable component captures keyboard users and provides no keyboard method to leave it.
Try It Yourself
Demo warning
This demo recreates a real keyboard trap. Keyboard users cannot exit without mouse assistance.
Open the trapped modal, then try Tab, Shift+Tab, and Escape. Notice that your focus cannot leave the trap.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Use a desktop browser and keep your mouse away after opening the demo.
- Ensure your focus starts before the demo button.
2. Reproduction Steps
- Open the trapped modal using Enter or Space.
- Press Tab repeatedly and attempt to move focus outside the modal.
- Press Escape and verify it does not release focus.
3. Expected Failure Signals
- Focus remains trapped in modal controls with no keyboard escape route.
- Escape does not close the dialog or return focus.
- User must reload page or use mouse-only workaround to recover.
4. Fix Verification
- Escape closes the modal and restores focus to the trigger button.
- Tab and Shift+Tab remain constrained only while modal is open.
- Close button is keyboard focusable and clearly labeled.
Evidence Capture Checklist
- Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
- Capture screen recording + keyboard path from first interaction to failure state.
- Map failure to WCAG 2.1.2 (Level A) and affected user groups.
- Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.
The Impact
What Happens
- Keyboard users cannot move away from the trapped region
- Screen reader users are blocked inside one interface zone
- Task completion becomes impossible without page reload
Who Gets Hurt
Blind users
Motor-impaired users
Keyboard-only users
Users with temporary injuries
The Broken Code
<!-- Focus enters modal and cannot escape -->
<div role="dialog" class="modal">
<input type="email" />
<button>Subscribe</button>
<!-- No close button -->
</div>
<script>
// No Escape key handling
// No programmatic close control
// No focus restoration
</script>WCAG 2.1.2: Reference
"If keyboard focus can be moved to a component, then focus can be moved away using only a keyboard interface."
Level A - Failing this criterion turns a webpage into a dead-end for keyboard users.
Related Critical Issues
Explore neighboring failures in the same severity band.
WCAG 2.1.2 A
CRITICAL
Focus Trap in Drawer
Focus is trapped inside a slide-over panel
Open Demo + Test Steps
WCAG 1.1.1 A
CRITICAL
Missing Alt on Functional Images
Image buttons and links with no text alternatives
Open Demo + Test Steps
WCAG 4.1.3 AA
CRITICAL
No Error Announcement
Form errors are never announced to assistive tech
Open Demo + Test Steps