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

Question

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

如果在我的 css 中该元素被 opacity:0 隐藏并赋予该元素 aria-hidden=true Angular 色，或者该元素也应该有显示:无？

要考虑的另一个因素是 aria Angular 色在这种情况下由 javascript 控制(css 有一个 :hover 伪类回退)。因此，对于没有 javascript 的环境，该元素只能使用 opacity:0 隐藏。

Answer 1

嗯，这基本上就是 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.

所以我会说"is"。

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

事实上，由于您使用opacity 来隐藏元素，因此没有理由使用display: none - visibility: hidden将更好地满足您的要求。