Issue guide
Keyboard traps
If focus cannot escape a component, keyboard users are stuck.
If focus cannot move in and out of a component predictably, keyboard users get stuck and cannot complete tasks.
See this on your site
Run a scan, then match rule names in your report to the sections below.
At a glance
Instructional
Confusing tab order
DOM order matches layout
Tab order should follow a predictable path.
Pattern
Modal pattern
Focus should move into the dialog on open, cycle inside, and return to the trigger on close. If focus escapes to the page behind, users can get lost.
Move focus into modals on open and restore it on close.
Why this matters
- Modals, drawers, and custom widgets often mishandle focus.
- Traps block checkout, login, and consent flows.
Where this shows up
Use this list to spot the same pattern on your templates and key URLs.
Modals and dialogs
- Newsletter popups
- Cookie banners
- Image lightboxes
Navigation
- Mobile menus that capture Tab indefinitely
Embeds
- Chat widgets that steal focus on load
Fix priority — address first
- Any modal on money paths.
- Site-wide overlays that appear on first visit.
Fix priority — can follow
- Small tooltips that do not take focus if non-modal.
Who is affected
Keyboard-only users, switch users, and people using screen readers with custom components.
Fix this in your platform
Stack-specific steps, pitfalls, and verification. Core issues link under /wordpress, /shopify, /react, or /nextjs; all issues also have /fix/… URLs.
Fixes
On open, move focus to the dialog; on close, restore focus. Escape should close when appropriate.
Examples (bad vs good)
Bad
Modal open but focus remains on a background link.
Good
Focus moves to the dialog heading or first button; Escape closes.
How to fix
- Reproduce with Tab/Shift+Tab and note where focus sticks.
- On open, move focus to the dialog container or first control.
- Trap focus inside while open; on close, restore focus to the opener.
- Rescan and regression-test related templates.
Platform-specific notes
Where this often comes from on common stacks—and what to change.
- React
- Prefer accessible dialog libraries or follow WAI-ARIA dialog pattern tests.
Common mistakes
- Opening a dialog without moving focus inside.
- Forgetting to return focus to the trigger on close.
How to verify the fix
- Open the widget with keyboard only; Tab through all controls.
- Press Escape if that is the expected dismiss pattern.
- Confirm focus returns to a sensible place; rescan.
Related: 2.1.2 No Keyboard Trap.
Related guides
Run another scan
After you ship a fix, rescan the same URL and keep both report links to compare.
Broader topics
Principles on these pages overlap with HTML issues: PDFs for documents and downloads, mobile for touch, contrast, and small screens.
Related issues
Next steps
Keep the scan, fix, rescan loop going
Ship a fix, then run another scan on the same URL. Each run gets its own report link so you can compare before and after.
Open scan