inert 属性

使用合集保持井井有条 根据您的偏好保存内容并对其进行分类。

Emma Twersky

inert 属性是一个全局 HTML 属性，它简化了如何移除和恢复元素的用户输入事件，包括焦点事件和来自辅助技术的事件。

Inert 是 dialog 元素中的默认行为，例如，当您使用 showModal 打开对话框供用户进行选择，然后从屏幕上关闭它时。打开 <dialog> 后，页面的其余部分将变为 inert，例如，您将无法再单击链接或使用 Tab 键切换到链接。

您可以使用 inert 属性在其他元素上实现相同的行为。

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 属性对于无障碍功能尤其有用，特别是为了防止焦点陷阱。

更佳的无障碍功能

Web 内容无障碍指南要求焦点管理和合理、可用的焦点顺序。这包括可发现性和交互性。以前，可发现性可以通过 aria-hidden="true" 来抑制，但交互性更难。

inert 使开发者能够从 Tab 键顺序和无障碍功能树中移除元素。这使您可以控制可发现性和交互性，并能够构建更可用且更易于访问的模式。

将 inert 应用于元素以实现更佳的无障碍功能主要有两种用例

• 当元素是 DOM 树的一部分，但位于屏幕外或隐藏时。
• 当元素是 DOM 树的一部分，但应为非交互式时。

屏幕外或隐藏的 DOM 元素

一个常见的无障碍功能问题是抽屉之类的元素，这些元素会将元素添加到 DOM 中，但并非始终对用户可见。借助 inert，您可以确保在抽屉子元素位于屏幕外时，键盘用户无法意外地与其交互。

非交互式 DOM 元素

另一个常见的无障碍功能问题是 UI 设计可见或部分可见，但显然是非交互式时。例如，这可能发生在页面加载期间、表单提交期间或对话框叠加层打开时。

为了向用户提供最佳体验，请指示 UI 的状态并将焦点“捕获”到页面的交互部分。

焦点捕获

焦点捕获是良好 UI 无障碍功能的中心概念。您应确保屏幕阅读器焦点位于交互式 UI 元素上，并在元素阻止交互时意识到这一点。这还有助于限制不良屏幕阅读器到达页面叠加层后面，或在第一次提交仍在处理时意外提交表单。

使用 inert，您可以确保只有可发现的内容是可访问的。这对于以下情况很有帮助

• 阻止元素，如模态对话框、焦点捕获菜单或侧边导航栏。
• 具有非活动项的轮播。
• 不适用的表单内容（例如，当“与账单地址相同”复选框被选中时，淡出并禁用“送货地址”字段）。
• 在状态不一致时禁用整个 UI。

直观地指示 inert 元素

默认情况下，没有子树处于 inert 状态的视觉指示。建议您清楚地标记 DOM 的哪些部分处于活动状态，哪些部分处于 inert 状态。

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

并非所有用户都能同时看到页面的所有部分。例如，屏幕阅读器、小型设备或放大镜的用户，甚至只是使用特别小的窗口的用户可能无法看到页面的活动部分，如果 inert 部分不明显是 inert 状态，则可能会感到沮丧。对于单个控件，disabled 属性可能更合适。

哪些交互和移动被阻止？

默认情况下，inert 会阻止焦点和点击事件。对于辅助技术，这还会阻止 Tab 键切换和可发现性。浏览器也可能会忽略元素中的页面搜索和文本选择。

inert 的默认值为 false。