inert 属性

Emma Twersky

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

不活动是 dialog 元素中的默认行为，例如，当您使用 showModal 打开一个对话框供用户进行选择，然后从屏幕上关闭该对话框时。打开 <dialog> 后，页面的其余部分会变为闲置状态，例如，您无法再点击或使用 Tab 键转到链接。

您可以使用 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，开发者能够从标签页顺序以及无障碍树中移除某个元素。这样，您就可以控制可发现性和互动性，并能够构建更易用且更易于访问的模式。

将 inert 应用于元素以实现更好的无障碍功能有以下两个主要用例：

• 当元素属于 DOM 树的一部分，但不在屏幕上或处于隐藏状态时。
• 当某个元素属于 DOM 树，但应是非交互元素时。

屏幕外或隐藏的 DOM 元素

一个常见的无障碍问题是抽屉等元素会向 DOM 添加用户不一定能看到的元素。借助 inert，您可以确保当抽屉式子元素不在屏幕上时，键盘用户无法意外与其互动。

非交互式 DOM 元素

另一个常见的无障碍功能问题是，界面设计可见或部分可见，但明显不可互动。例如，在网页加载期间、表单提交期间或对话框叠加层打开时，可能会出现这种情况。

为了为用户提供最佳体验，请指明界面的状态，并将焦点“捕获”到页面上可互动的部分。

焦点捕获

焦点捕获是良好界面无障碍设计的核心概念。您应确保屏幕阅读器的焦点位于可交互的界面元素上，并在某个元素阻止交互时提供相关提示。这还有助于限制恶意屏幕阅读器访问页面叠加层背后的内容，或在第一次提交仍在处理时意外提交表单。

使用 inert，您可以确保可访问的唯一内容。这对以下方面很有帮助：

• 遮挡元素，例如模态对话框、聚焦捕获菜单或侧边导航栏。
• 包含非活跃项的轮播界面。
• 不适用的表单内容（例如，在选中“与账单地址相同”复选框后，使“送货地址”字段淡出并停用）。
• 在处于不一致状态时停用整个界面。

直观地指明 inert 元素

默认情况下，系统不会以视觉方式指明子树处于不活跃状态。建议您明确标记 DOM 的哪些部分处于活动状态，哪些部分处于不活动状态。

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

并非所有用户都能同时查看同一网页的所有部分。例如，使用屏幕阅读器、小型设备或使用放大镜的用户，甚至是仅使用特别小的窗口的用户，可能无法看到网页的活跃部分，并且如果闲置部分没有明显的闲置状态，他们可能会感到失望。对于单个控件，disabled 属性可能更合适。

哪些互动和移动会被屏蔽？

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

inert 的默认值为 false。