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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31383115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:43:10  来源:igfitidea点击:

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

javascripthtmlwebaccessibilitywai-aria

提问by Calebmer

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

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

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

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

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

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

回答by Luaan

Well, that's basically how aria-hiddenis defined:

嗯,这基本上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-disabled。

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

So I'd say "yes".

所以我会说“是”。

Of course, as long as you have aria-hiddenset, it's trivial to use it to actuallyhide 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.

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

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

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