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">发推</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 属性