使用 aria-hidden 属性

本文用来说明如何使用 aria-hidden 属性。aria-hidden 属性可以用来控制一系列可访问 API 中的非交互内容的显示或隐藏。

描述

把 aria-hidden="true" 加到元素上会把该元素和它的所有子元素从无障碍树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：

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

根据无障碍的第四条规则，aria-hidden="true" 不应该被用在可聚焦的元素上。而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。

如果父元素带有 aria-hidden="true" ，那么即使使用 aria-hidden="false" 也无法将该元素显示出来。

警告： WAI-ARIA Authoring Practices 1.1 提示 aria-hidden="false" 在现阶段 各个浏览器中表现不同.

比较 aria-hidden="true"， role="presentation" 和 role="none"

表面上，aria-hidden="true"，role="presentation"，和role="none" 很相似，因为这三者都有以下特性：

  • 根据辅助即使隐藏页面内容
  • 无法在可聚焦元素上使用
  • 无法在可互动元素的父级元素上使用

尽管有上面这些相同点，但是各个属性的意图是不同的。

  • aria-hidden="true" 会把整个元素从无障碍 API 中移除
  • role="presentation" 和role="none" 会将元素从语义上移除，仍然会将元素暴露给辅助技术。

可选值

false

（默认）元素会暴露给无障碍 API。

true

元素不会暴露给无障碍 API。

undefined

（默认）客户端决定元素是否暴露给无障碍 API。

示例

 <i class="icon" aria-hidden="true" />

无障碍问题

最佳实践

aria-hidden="true" 在以下场景不应该被使用：

  • HTML 的hidden属性被设置了
  • 祖先元素被display: none属性设置成不显示状态
  • 祖先元素被visibility: hidden属性设置成不显示状态

在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加aria-hidden="true"属性。

规范

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-hidden

另见