使用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"属性。

技术规格

另见