Escape to Close and Restore Focus
Give a reliable exit that returns the user back.
Escape to Close and Restore Focus is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 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.
Every Modal Needs an Exit
A modal that you cannot leave is a trap. Users expect a fast, reliable way to close it without hunting for a tiny button.
Escape Is the Universal Key
The Escape key is the agreed shortcut to dismiss a dialog. Keyboard and screen reader users reach for it first, so always support it.
Native dialog Handles Escape
A native dialog opened with showModal() closes on Escape automatically, firing a cancel event you can listen to if needed.
dialog.addEventListener('cancel', onClose);Wiring Escape Yourself
For a custom modal, listen for the keydown event and close when the key is Escape. It is a few lines, but never skip it.
if (e.key === 'Escape') closeModal();Remember Where Focus Was
Before you open the modal, save the element that had focus. document.activeElement is the trigger you will return to later.
const opener = document.activeElement;Restore Focus on Close
When the modal closes, send focus back to that saved trigger. This restore focus step is what makes closing feel seamless.
closeModal();
opener.focus();Why Restoring Matters
Without restore, focus jumps to the top of the page. The user loses their place and must tab all the way back. Frustrating and avoidable. 😕
A Visible Close Button Too
Escape is not enough on its own. Offer a clearly labeled close button so mouse and touch users have an obvious exit as well.
<button aria-label="Close dialog">×</button>Clicking the Backdrop
Many modals also close when you click the dimmed backdrop. It is a nice extra, but it must never replace Escape or the button.
Be Careful With Destructive Actions
For dialogs that confirm something risky, you may suppress quick dismissal so a stray Escape does not skip an important choice.
Test the Full Loop
Open with the keyboard, press Escape, and confirm focus lands back on the exact trigger you started from. That round trip is the goal. ✅
Quick Check
A user opens a modal from a button and presses Escape. Where should focus land?
Recap: Close Cleanly
You learned to support Escape, offer a visible close button, and restore focus to the opener so closing never strands the user. 🎯
Frequently asked questions
Is the “Escape to Close and Restore Focus” lesson free?
Yes — the full text of “Escape to Close and Restore Focus” 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 “Escape to Close and Restore Focus”?
Give a reliable exit that returns the user back. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Escape to Close and Restore Focus” 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