Spotting Keyboard Traps
Find places where focus gets stuck with no exit.
Spotting Keyboard Traps is a free Web Accessibility Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Stuck With No Way Out
A keyboard trap is any spot where focus goes in but cannot get out with the keyboard. For a mouse-free user, it is a dead end. 🪤
Why It Is So Serious
A trapped user may have to reload the whole page just to escape. WCAG calls a no-exit trap a failure, not a minor bug.
The Classic Culprits
Traps love rich widgets: custom date pickers, embedded editors, and third-party plugins that grab focus and never hand it back.
The Broken Modal
A dialog that intercepts Tab but offers no way to leave is the most common trap. A real modal must close on Escape.
Iframes Can Swallow Focus
Embedded content like a video or map sits in an iframe. Some grab focus and leave the user circling inside with no exit.
Bad Event Handlers
Script that calls preventDefault on the Tab key can block the browser's normal move. Suddenly focus simply refuses to advance.
el.addEventListener('keydown', e => e.preventDefault());The One-Way Trap
Some traps let Tab move forward but block Shift+Tab. Test both directions, because a one-way path is still a trap.
Intentional Trapping Is Fine
Holding focus inside an open modal is correct on purpose. The rule is that there must always be a clear exit like Escape or a close button.
How to Find Them
The test is blunt and effective. Tab through the entire page using only the keyboard and never reach for the mouse to escape.
The Telltale Sign
If focus keeps cycling inside one component and Tab will not carry you onward, you have found a trap. Note exactly where it caught you.
Fix the Exit Path
The fix is to restore a way out: let Tab continue, honor Escape, and on close return focus to the trigger that opened the layer.
Quick Check
Identify what truly defines a keyboard trap.
Recap: Spotting Traps
A trap holds focus with no keyboard exit, and it fails WCAG. Tab through everything both ways, and always provide an escape path. ✅
Frequently asked questions
Is the “Spotting Keyboard Traps” lesson free?
Yes — the full text of “Spotting Keyboard Traps” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Spotting Keyboard Traps”?
Find places where focus gets stuck with no exit. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Spotting Keyboard Traps” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.