aria-hidden

aria-hidden 状态指示元素是否暴露给无障碍 API。

描述

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 属性