aria-hidden = true是否表示您不必使用display：none？ [英] Does aria-hidden=true mean you don't have to use display:none?

问题描述

我听说将 display：none 应用于不可见的东西更容易访问，然后更改不透明度。但是，使用 display：none 会弄乱我的一些CSS动画，这些动画会逐渐分层到核心功能上。

I have heard that applying display:none to things that are not visible is more accessible then changing opacity. However using display:none messes up some of my css animations that are progressively layered onto the core functionality.

是如果在我的css中该元素被 opacity：0 隐藏并给该元素 aria-hidden = true ，则可以访问角色，还是该元素还应具有 display：none ？

Is it accessible if in my css the element is hidden with opacity:0 and give the element the aria-hidden=true role, or should the element also have display:none?

要考虑的另一个因素是aria角色是在这种情况下由javascript控制（css具有：hover 伪类后备）。因此，对于没有javascript的环境，该元素只能使用 opacity：0 隐藏。

Another factor to be considered is the aria roles are controlled by javascript (the css has a :hover pseudo-class fallback) in this instance. So for environments without javascript the element would only be hidden with opacity:0.

推荐答案

好吧，基本上就是定义 aria隐藏的方式：

Well, that's basically how aria-hidden is defined:

指示该元素及其所有后代对作者所实现的任何用户都不可见或不可感知。

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.

如果某个元素仅在某些用户操作后才可见，则作者必须将aria-hidden属性设置为true。呈现元素时，作者必须将aria-hidden属性设置为false或删除该属性，以指示该元素可见。一些辅助技术直接通过DOM而不是通过浏览器支持的平台可访问性来访问WAI-ARIA信息。作者必须对未显示的内容设置aria-hidden = true，无论使用何种机制隐藏它。这样，辅助技术或用户代理就可以正确跳过文档中的隐藏元素。

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 c，就可以用它来实际上隐藏该元素，即使对于非阅读器版本也是如此- [aria-hidden = true] { } 。理想情况下，您应该在隐藏动画的末尾进行设置。

Of course, as long as you have aria-hidden set, it's trivial to use it to actually hide the element, even for the non-reader version - [aria-hidden="true"] { visibility: hidden; }, for example. Ideally, you'd set this at the end of your "hiding" animation.

实际上，因为您使用的是 opacity 隐藏元素，没有理由使用 display：none - visibility：hidden 要求要好得多。

In fact, since you're using opacity to hide the elements, there's no reason to use display: none - visibility: hidden will fit your requirements much better.

这篇关于aria-hidden = true是否表示您不必使用display：none？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！