aria-hidden=true 是否意味着您不必使用 display:none?

Does aria-hidden=true mean you don't have to use display:none?

我听说将 display:none 应用于不可见的事物比更改不透明度更容易访问。然而,使用 display:none 弄乱了我的一些 css 动画,这些动画逐渐分层到核心功能上。

如果在我的 css 中元素被 opacity:0 隐藏并赋予元素 aria-hidden=true 角色,是否可以访问,或者元素也应该具有 display:none

另一个要考虑的因素是,在这种情况下,aria 角色由 javascript 控制(css 有一个 :hover 伪 class 回退)。因此对于没有 javascript 的环境,该元素只会被 opacity:0.

隐藏

好吧,aria-hidden 基本上就是这样定义的:

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.

If an element is only visible after some user action, authors MUST set the aria-hidden attribute to true. When the element is presented, authors MUST set the aria-hidden attribute to false or remove the attribute, indicating that the element is visible. Some assistive technologies access WAI-ARIA information directly through the DOM and not through platform accessibility supported by the browser. Authors MUST set aria-hidden="true" on content that is not displayed, regardless of the mechanism used to hide it. This allows assistive technologies or user agents to properly skip hidden elements in the document.

所以我会说“是”。

当然,只要您设置了 aria-hidden,使用它来 实际上 隐藏元素是微不足道的,即使对于非 reader 版本 - 例如 [aria-hidden="true"] { visibility: hidden; }。理想情况下,您可以在“隐藏”动画结束时设置它。

事实上,由于您使用 opacity 来隐藏元素,因此没有理由使用 display: none - visibility: hidden 更符合您的要求。