为jQuery .toggle（）方法添加WAI-ARIA支持

问题描述

我想配对。

所以给定< p id =myElement>您好< / p>

$（'＃myElement'）。切换（）将隐藏元素，并设置 aria-hidden =true：

$('#myElement').toggle() would hide the element, and set aria-hidden="true":

< p id =myElementstyle =display：none; aria-hidden =true>你好< / p>

执行相同的 $（' #myElement'）。toggle（）脚本将再次显示（切换）元素，并设置（切换） aria-hidden =false ：

And executing the same $('#myElement').toggle() script again would show (toggle) the element, and set (toggle) aria-hidden="false":

< p id =myElementstyle =display：blockaria-hidden =false>嗨那里< / p>

我可能想要使用，或许类似于

I probably want to use the complete function of the method, maybe something along the lines of

$('#myElement').toggle(
    if ($this.css('display')==='none'){
       $this.prop('aria-hidden', 'true')
    }
    else
    {
            $this.prop('aria-hidden', 'false')
    }
)

扩展 .toggle（）的最佳性能解决方案是什么？ aria-hidden 州？

What's the most performant solution for extending .toggle() to also toggle the aria-hidden state?

推荐答案

简短的回答是没有必要这样做。

Accessible Technology支持CSS的 display：hidden; 属性已经正确隐藏元素的方式。因此，从屏幕阅读器的角度来看，指定 aria-hidden =true是多余的，是jQuery的 .toggle（）方法将显示属性设置为隐藏。指定 aria-hidden =false（或删除 aria-hidden 属性）对于jQuery的<$ c是多余的$ c> .toggle（）方法将显示属性设置为内联。

Accessible Technology supports CSS's display: hidden; property in a way that already properly hides the element. So specifying aria-hidden="true" is redundant, from a screen-reader's point of view, to jQuery's .toggle() method setting the display property to hidden. Specifying aria-hidden="false" (or removing the aria-hidden property) is redundant to jQuery's .toggle() method setting the display property to inline.

请参阅和的博文（特别是结果摘要） ）了解更多细节。

Please see https://stackoverflow.com/a/10351673/1430996 and Steve Faulkner's HTML5 Accessibility Chops: hidden and aria-hidden blog post (particularly the "Results Summary") for further details.

这篇关于为jQuery .toggle（）方法添加WAI-ARIA支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！