ARIA: aria-hidden 属性

描述

aria-hidden 属性可用于将非交互式内容隐藏起来，使其不被可访问性 API 读取。

将 aria-hidden="true" 添加到元素上，会将该元素及其所有子元素从可访问性树中移除。这可以通过隐藏以下内容来改善辅助技术用户的使用体验：

• 纯装饰性内容，例如图标或图像
• 重复的内容，例如重复的文本
• 屏幕外或折叠的内容，例如菜单

aria-hidden 属性的存在会将内容隐藏起来，使其无法被辅助技术读取，但并不会在视觉上隐藏任何内容。

aria-hidden="true" 不应应用于可获得焦点的元素。此外，由于该属性会被其子元素继承，因此不应将其添加到可获取焦点的元素的父元素或祖先元素上。

元素的隐藏状态取决于它是否被渲染。渲染通常由 CSS 控制。例如，一个通过 CSS 将 display 属性设置为 none 的元素是未被渲染的。当一个元素本身，或其任何祖先元素未被渲染，或者其 aria-hidden 属性值被设置为 true 时，该元素就被视为隐藏。请注意，即使元素及其子元素声明了 aria-hidden="true"，它们仍然是可见的，除非它们也被 CSS 隐藏了。

在使用 aria-hidden 将可见渲染的内容隐藏起来，使其不被辅助技术读取时，请务必小心。除非这样做可以通过移除冗余或不必要的内容来改善辅助技术用户的体验，否则不应隐藏可见内容。只有当相同或等效的含义和功能已暴露给辅助技术时，才能考虑从可访问性 API 中移除可见内容。

从表面上看，aria-hidden="true" 和 role="presentation" 及其同义词 role="none" 看起来很相似，但它们背后的意图是不同的。

• aria-hidden="true" 会将整个元素从可访问性 API 中移除。
• role="presentation" 和 role="none" 会移除元素的语义含义，但仍会将其及其内容暴露给辅助技术。

不应在以下情况添加 aria-hidden="true"：

• 存在 HTML hidden 属性时
• 元素或元素的祖先使用 display: none 隐藏时
• 元素或元素的祖先使用 visibility: hidden 隐藏时

在所有这三种情况下，添加该属性都是不必要的，因为元素已经被从可访问性树中移除了。使用 display 或 visibility 在视觉上隐藏元素会同时从屏幕和辅助技术中隐藏内容。

如果父元素指定了 aria-hidden="true"，则使用 aria-hidden="false" 将不会重新将该元素暴露给辅助技术。

示例

将 aria-hidden="true" 添加到图标上，可以将图标字符从可访问名称中排除。

<button>
  <span class="fa fa-tweet" aria-hidden="true"></span>
  <span class="label"> Tweet </span>
</button>

我们有一个带 Font Awesome 图标的按钮。我们使用 aria-hidden="true" 将图标隐藏起来，使其不被辅助技术读取，因为将图标暴露给辅助技术可能导致冗余，或者如果图标内容与可见文本不一致，则可能导致混淆。

值

false

元素会被暴露给可访问性 API，就像它被渲染一样。

true

元素被隐藏，不向辅助功能 API 公开。

undefined（默认值）

元素的隐藏状态由用户代理根据其是否渲染来决定。

相关接口

Element.ariaHidden

Element 接口的 ariaHidden 属性反映了 aria-hidden 属性的值，该属性指示元素是否暴露给可访问性 API。

ElementInternals.ariaHidden

ElementInternals 接口的 ariaHidden 属性反映了 aria-hidden 属性的值。

相关角色

用于 **所有** 角色

规范

另见

• aria-disabled
• aria-modal
• aria-expanded
• HTML hidden 属性
• CSS display 属性
• CSS visibility 属性