Skip to main content
WCAG 2.1.2 No Keyboard Trap (Level A)
This page demonstrates how to handle keyboard focus properly and avoid keyboard traps.
- Goal: Keyboard users don't get stuck.
- What to do: Ensure users always know how to navigate away from components.
- Why it's important: People who rely on the keyboard often have no other means to navigate.
Accessible Modal Example
This modal demonstrates proper keyboard handling:
Bad Example (For Demonstration Only)
This example shows a problematic implementation that creates a keyboard trap:
Problematic Modal
This modal demonstrates what NOT to do:
- No way to close with keyboard
- Focus is trapped without proper management
- Missing ARIA attributes
Custom Widget with Proper Keyboard Support
Interactive Widget
Best Practices for Avoiding Keyboard Traps
- Always provide a way to exit modals using the keyboard (ESC key)
- Ensure all interactive elements can be reached using Tab key
- Return focus to the triggering element when closing dialogs
- Maintain a logical tab order that matches visual layout
- Test your interface using only a keyboard