HTML inert 属性：交互禁用与无障碍

---

title: HTML inert 属性：交互禁用与无障碍

keywords:

• inert
• 交互禁用
• 焦点管理
• 可访问性
• 模态层

description: 使用 inert 将区域从交互与可访问性树中移除，配合模态层与焦点陷阱确保正确的交互流与辅助技术体验。

categories:

• 文章资讯
• 编程技术

---

概述

inert 属性使元素及其后代不可聚焦且不可交互，并从可访问性树移除。常用于模态打开时禁用背景区域。

用法/示例

<main inert>...</main>
<dialog open>...</dialog>

const main = document.querySelector('main')
const dlg = document.querySelector('dialog')
dlg.addEventListener('close', () => { main.inert = false })

工程建议

• 与 dialog 与焦点管理协作，确保打开/关闭时状态一致。
• 在不支持环境通过 polyfill 提供行为，并避免使用 display: none 破坏语义。
• 配合 aria-hidden 与可见焦点样式提升无障碍质量。

参考与验证

• MDN：inert — https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inert
• web.dev：Inert — https://web.dev/articles/inert