使用 aria-hidden 属性

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

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

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

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

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

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

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

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

false

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

true

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

undefined

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

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

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

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

• 使用展示角色 (en-US)
• role="none"