HTML inert 属性 模态背景不可交互与焦点管理实践

HTML inert 属性 模态背景不可交互与焦点管理实践概述`inert` 使元素及其后代变为不可交互（不可聚焦、不可点击、不可被查找），适用于模态弹窗场景的背景区域治理。核心概念与参数`inert` 全局属性：布尔属性，应用于任何元素以禁用其交互能力。`HTMLElement.inert`：JS 读写访问属性值，便于在弹窗显隐时切换。实践示例<main id="app"> <!-- 页面主体 --> <button onclick="openModal()">打开弹窗</button> </main> <dialog id="modal"> <h2>标题</h2> <p>内容...</p> <button onclick="closeModal()">关闭</button> </dialog> <script> const app = document.getElementById('app'); const modal = document.getElementById('modal'); function openModal() { app.inert = true; // 背景不可交互 modal.showModal(); } function closeModal() { modal.close(); app.inert = false; } </script> 验证方法规范与支持：参考 MDN（HTML inert、HTMLElement.inert）与 HTML Standard，确认跨浏览器自 2023 年起的稳定支持。可访问性：验证键盘焦点被限制在模态内；读屏不会访问 inert 子树内容。兼容策略：在不支持的环境中回退到 `aria-hidden` 与 `tabindex="-1"` 组合策略。注意事项`inert` 不改变视觉展示，需配合样式遮挡背景以传达不可交互状态。不用于单个表单控件禁用，优先使用 `disabled`。弹窗关闭时确保恢复背景交互与标题、焦点状态更新。参考：MDN（HTML inert、HTMLElement.inert）、HTML Standard。