CRITICALWCAG 2.1.2 A
Focus Trap in Drawer
A drawer opens and steals focus. Keyboard users cannot return to the page content or close the panel without a mouse.
Try It Yourself
Demo warning
This demo recreates a trapped focus loop inside a drawer pattern.
Open the drawer and attempt to navigate back to the page using Tab and Shift+Tab.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Open the demo and ensure focus starts on the drawer trigger.
- Use only keyboard navigation after the drawer opens.
2. Reproduction Steps
- Activate the drawer with Enter or Space.
- Press Tab and Shift+Tab to attempt leaving the drawer.
- Try Escape to close the drawer (it should fail in the broken demo).
3. Expected Failure Signals
- Focus never returns to the main page content.
- Escape does not close the drawer or restore focus.
- The only exit path is a mouse click outside the panel.
4. Fix Verification
- Escape closes the drawer and restores focus to the trigger.
- Focus is trapped only while drawer is open, then released properly.
- Close button is focusable and announces its purpose.
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 return to the main task flow
- Screen reader users become trapped in one panel
- Workflows are abandoned to escape the UI
Who Gets Hurt
Keyboard-only users
Screen reader users
Motor-impaired users
The Broken Code
<aside role="dialog" class="drawer">
<a href="#link-1">Overview</a>
<a href="#link-2">Settings</a>
<!-- No close button, no Escape handling -->
</aside>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 - Drawers are common in modern apps; trapping focus blocks every downstream task.
Related Critical Issues
Explore neighboring failures in the same severity band.
WCAG 2.1.2 A
CRITICAL
Keyboard Trap
Focus gets stuck with no way out
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