inert 属性与焦点管理可访问性治理实践

inert 属性与焦点管理可访问性治理实践概述`inert` 可使元素及其子树不可聚焦与不可交互，常用于模态对话框开启时禁用背景区域，从而避免焦点泄漏与读屏干扰。核心概念与参数启用禁用：在非活动区域设置 `inert`，恢复时移除。焦点初始：打开模态后将焦点置于对话框内部的可聚焦元素。键盘导航：支持 `Escape` 关闭、循环 Tab 导航。实践示例<main id="page"> <button id="open">打开</button> <dialog id="dlg"> <form method="dialog"> <h3>设置</h3> <button>确定</button> </form> </dialog> </main> <script> const page = document.getElementById('page'); const dlg = document.getElementById('dlg'); document.getElementById('open').addEventListener('click', () => { page.setAttribute('inert', ''); dlg.showModal(); dlg.querySelector('button').focus(); }); dlg.addEventListener('close', () => { page.removeAttribute('inert'); }); </script> 验证方法浏览器支持：Chrome 102+、Safari 15.4+、Firefox 122+。测试环境：Windows 11 / macOS 14；键盘导航与读屏工具验证焦点不泄漏。可访问性：配合 `dialog`、`aria-modal="true"` 与 `focus-visible` 保证可达性。注意事项避免将 `inert` 用于包含必要的系统提示区域，注意信息可达性。与焦点陷阱库协同，保证循环 Tab 与关闭路径一致。模态关闭后恢复焦点至触发器元素。