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
属性对于无障碍功能尤为有用,尤其是在防止焦点陷阱方面。
无障碍功能更完善
《网络内容无障碍指南》规定了焦点管理和合理可用的焦点顺序。这包括可检测性和互动性。以前,可检测性可以通过 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
会阻止焦点和点击事件。对于辅助技术,这也会阻止标签页导航和可检测性。浏览器可能还会忽略该元素中的网页搜索和文本选择。
inert
的默认值为 false
。