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

概述

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

用法/示例

...
...

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