inert 属性

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

浏览器支持

  • Chrome:102。 <ph type="x-smartling-placeholder">
  • Edge:102。 <ph type="x-smartling-placeholder">
  • Firefox:112。 <ph type="x-smartling-placeholder">
  • Safari:15.5。 <ph type="x-smartling-placeholder">

来源

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>

此处,对包含 button2 的第二个 <div> 元素声明了 inert, 因此,此 <div> 中包含的所有内容(包括按钮和标签)都无法获得焦点,也无法获得点击。

inert 属性对于无障碍功能尤其有用, 尤其是为了防止焦点陷阱。

更好的无障碍功能

《网络内容无障碍指南》要求对焦点进行管理,并采用合理可用的焦点顺序。包括曝光度和互动性。以前,可通过 aria-hidden="true" 抑制可检测性,但要与之互动,难度更大。

借助 inert,开发者能够从 Tab 键顺序以及无障碍树中移除某个元素。这样,您就可以控制可检测性和互动性,并能够构建更易用、更易访问的模式。

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