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

ariaHidden 属性（Element 接口的一部分）反映了 aria-hidden 属性的值，该属性指示元素是否公开给无障碍访问 API。

ElementInternals.ariaHidden

ariaHidden 属性（ElementInternals 接口的一部分）反映了 aria-hidden 属性的值

在**所有**角色中使用

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