HTML inert 属性
inert 属性是一个全局 HTML 属性，可以简化移除和恢复元素用户输入事件（包括焦点事件和来自辅助技术的事件）的方式。
inert 是 dialog 元素的默认行为，例如，当您使用 showModal 打开一个对话框供用户进行选择，然后从屏幕上将其关闭时。 打开 <dialog> 后，页面的其余部分会失效，例如，您无法再点击或 Tab 键转到链接。
您可以使用 inert 属性在其他元素上实现相同的行为。
“Inert”表示无法移动，因此，当您标记某些元素时，会移除这些 DOM 元素的移动或互动。
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>此处，inert 是在包含 button2 的第二个 <div> 元素中声明的，因此此 <div> 中包含的所有内容（包括按钮和标签）都无法获得焦点或点击。
inert 属性对于无障碍功能尤其有用，尤其是防止焦点陷阱。
无障碍功能更出色
《网络内容无障碍指南》要求对焦点进行管理，并且必须具有合理且易用的焦点顺序。这既包括曝光度，也包括互动性。以前，使用 aria-hidden="true" 可能会抑制可检测性，但互动性更强。
借助 inert，开发者能够从标签页顺序和无障碍功能树中移除元素。这样一来，您就可以同时控制可检测性和互动性，并能够构建更实用、更易于访问的模式。
将 inert 应用于元素以实现更好的无障碍功能主要有以下两种用例：
- 元素是 DOM 树的一部分，但位于屏幕之外或隐藏。
- 元素是 DOM 树的一部分，但应该是非互动元素。
屏幕外或隐藏的 DOM 元素
在无障碍功能方面有一个常见的顾虑，那就是像抽屉式导航栏这样的元素，这类元素会向 DOM 添加并非始终对用户可见的元素。借助 inert，您可以确保当抽屉式导航栏子元素位于屏幕外时，键盘用户不会意外与其互动。
非交互式 DOM 元素
另一个常见的无障碍功能问题是，界面设计可见或部分可见，但明显是非交互式的。例如，可能发生在网页加载期间、表单提交期间或对话框叠加层打开时。
为了向用户提供最佳体验，请指明界面的状态并将焦点“置于”页面上具有交互性的部分。
追踪焦点
焦点陷阱是良好界面无障碍功能的一个核心概念。您应确保屏幕阅读器焦点位于交互式界面元素上，并感知某个元素阻止互动的情况。这也有助于限制恶意屏幕阅读器在页面叠加层后显示内容，或在首次提交内容仍在处理期间意外提交表单。
使用 inert，您可以确保仅可访问可检测到的内容。这对于以下情况大有帮助：
- 屏蔽元素，例如模态对话框、焦点陷阱菜单或侧边导航。
- 包含无效项的轮播界面。
- 不适用的表单内容（例如，在选中“与账单邮寄地址相同”复选框后淡出并停用“送货地址”字段）。
- 在处于不一致状态时停用整个界面。
直观地指示 inert 元素
默认情况下，无法直观地指示子树正在初始化。建议您明确标记 DOM 的哪些部分处于活动状态，哪些部分为非活动部分。
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}并非所有用户都能同时查看网页的所有部分。例如，使用屏幕阅读器、小型设备或使用放大镜的用户，甚至只是使用特别小窗口的用户，可能都看不到网页中的活跃部分，而且如果过时部分没有明显的惯性，他们可能会感到沮丧。对于单个控件，已停用属性可能更合适。
哪些互动和移动操作会被屏蔽？
默认情况下，inert 会屏蔽焦点和点击事件。对于辅助技术，这还会阻止 Tab 键切换和可检测性。浏览器也可能会忽略元素中的网页搜索和文本选择。
inert 的默认值为 false。
