Trapping Focus Inside the Modal
Keep Tab from escaping to the page behind.
Trapping Focus Inside the Modal is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 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.
Why Focus Must Stay In
While a modal is open, keyboard focus should stay inside it. If Tab escapes to the page behind, blind users get lost in content they cannot see.
The Native Element Helps
A real dialog opened with showModal() traps focus for you automatically, which is one big reason to prefer it over a div.
When You Build Your Own
If you roll a custom modal with a div, you must trap focus yourself, because nothing stops Tab from leaking out to the page.
Move Focus In on Open
First, send focus into the modal when it opens, usually to the first control or the heading, so the user starts in the right place.
modal.querySelector('button').focus();Find the Focusable Elements
Collect the modal's focusable items: links, buttons, inputs, and anything with tabindex. You need the first and last to build the loop.
modal.querySelectorAll('a, button, input, [tabindex]');Loop From Last to First
When Tab is pressed on the last element, send focus back to the first. This wraps the user around instead of letting them out.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Loop From First to Last
Handle Shift+Tab on the first element too: send focus to the last one so backward tabbing also stays trapped.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Prevent the Default Tab
At the edges you must call preventDefault(), otherwise the browser moves focus out before your code can redirect it.
e.preventDefault();Mind Disabled and Hidden Items
Skip elements that are disabled or hidden when picking first and last, since they cannot actually receive focus.
Do Not Forget the Background
Trapping focus pairs with making the page behind inert, so even a stray click or screen reader cannot reach it while the modal is open.
Test It With the Keyboard
Tab through the whole modal and watch the focus ring cycle without ever leaving. That round trip is your proof the trap works. ✅
Quick Check
You built a custom div modal. What must you do to keep Tab inside it?
Recap: Keep Focus Captive
You learned to move focus in on open and loop it at both edges, so keyboard users stay inside the modal until they choose to close it. 🎯
Frequently asked questions
Is the “Trapping Focus Inside the Modal” lesson free?
Yes — the full text of “Trapping Focus Inside the Modal” 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 “Trapping Focus Inside the Modal”?
Keep Tab from escaping to the page behind. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Trapping Focus Inside the Modal” 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.
All lessons in this course
- Dialog Roles and the Native dialog Element
- Trapping Focus Inside the Modal
- Escape to Close and Restore Focus
- Inert Background and aria-modal