图层关闭时恢复焦点
将用户带回他们离开的位置。
图层关闭时恢复焦点 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Layers Borrow Focus
When a modal, menu, or drawer opens, focus moves inside it. When it closes, you are responsible for returning focus to where the user was.
The Lost-Focus Problem
If a closed layer leaves focus on a removed element, it falls back to the page body. The user is stranded with no sense of place.
Remember the Trigger
The fix starts before opening: save a reference to the element that triggered the layer, usually document.activeElement.
const trigger = document.activeElement;Restore on Close
When the layer closes, call focus() on that saved trigger so the user lands right back where they started.
trigger.focus();The Full Round Trip
Open: store the trigger and focus the layer. Close: hide it and restore the trigger. That loop is the focus contract of any dismissible layer. 🔁
Native dialog Helps
The browser's dialog element restores focus to the opener automatically when you call close(), saving you the manual bookkeeping.
myDialog.close();Handle Every Exit Path
Restore focus no matter how the layer closes: a Close button, the Escape key, or a click on the backdrop should all return the user.
When the Trigger Is Gone
If the trigger was removed while the layer was open, send focus to a sensible nearby element instead, never to nowhere.
Why This Matters So Much
Sighted mouse users barely notice, but for keyboard and screen reader users a missed focus return can make a feature unusable.
Test It Keyboard-Only
Open the layer with Enter, close it with Escape, and confirm the focus ring reappears on the button that opened it.
Make It a Habit
Treat focus return as part of building any overlay, not an afterthought. Wire it the moment you add open and close logic.
Quick Check
A custom modal closes. What is the correct destination for focus?
Recap
You can now close the loop: save the trigger on open, restore focus to it on every close path, and lean on native dialog when you can. 🎯
常见问题解答
「图层关闭时恢复焦点」课时是免费的吗？
是的 — 「图层关闭时恢复焦点」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「图层关闭时恢复焦点」这节课中我会学到什么？
将用户带回他们离开的位置。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「图层关闭时恢复焦点」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。