使用 inert 背景与 aria-modal
打开时让页面其余部分无法访问。
使用 inert 背景与 aria-modal 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
后面的页面仍然存在
即使焦点被限制，模态框后面的内容仍然存在于 DOM 中。除非阻止屏幕阅读器，否则它仍可能进入这些内容。
认识 inert 属性
inert 属性可以一次性让某个元素及其所有子元素无法获得焦点、无法点击，并且被辅助技术跳过。
<main inert>...page content...</main>让背景不可交互
模态框打开时，将 inert 添加到它之外的所有内容上。这样，后面的页面就确实无法被任何人访问。
pageContent.inert = true;关闭时移除 inert
模态框关闭时，移除 inert 属性，让页面恢复交互。如果忘记这一步，页面就会一直处于冻结状态。
pageContent.inert = false;原生 dialog 会替您完成这一步
使用 showModal() 打开的原生 dialog 会自动将页面其余部分设为不可交互，因此无需额外代码就能获得这种保护。
aria-modal 的声明内容
将 aria-modal 设置为 true，可以告诉辅助技术：此对话框打开期间，其外部内容不可用。
<div role="dialog" aria-modal="true">...</div>aria-modal 是承诺，不是屏障
请注意：aria-modal 只会告知屏幕阅读器。它实际上不会阻止焦点或点击，因此您仍然需要 inert。
将两者结合使用
可靠的模式是在背景上使用 inert，并在对话框上使用 aria-modal。前者负责强制执行，后者负责宣告边界。
<div role="dialog" aria-modal="true">
<!-- background gets inert -->旧式 aria-hidden 技巧
在 inert 得到广泛支持之前，开发者会在背景上添加 aria-hidden。它可以将内容隐藏于屏幕阅读器，但无法阻止键盘焦点进入。
绝不要隐藏对话框本身
一个经典错误是将 aria-hidden 应用得过于宽泛，连对话框也包含在内。请确保您的模态框不属于隐藏区域。
在树中验证
打开浏览器的无障碍树，同时让模态框保持打开。确认后面的页面已从树中消失，只剩下对话框。✅
快速检查
您添加了 aria-modal=true，却跳过了 inert。还会存在什么问题？
回顾：封闭背景内容
您已经学会将后面的页面设为 inert 并声明 aria-modal，因此模态框真正成为用户唯一可以访问的内容。🎯
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「使用 inert 背景与 aria-modal」课时是免费的吗？
是的 — 「使用 inert 背景与 aria-modal」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「使用 inert 背景与 aria-modal」这节课中我会学到什么？
打开时让页面其余部分无法访问。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「使用 inert 背景与 aria-modal」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 对话框角色与原生 dialog 元素
- 将焦点限制在模态框内
- 按 Escape 关闭并恢复焦点
- 使用 inert 背景与 aria-modal