向jQuery .toggle()方法中添加WAI-ARIA支持

Question

我想将aria-hidden支持与jQuery的.toggle()方法结合起来。

所以给出了<p id="myElement">Hi there</p>

$('#myElement').toggle()将隐藏元素，并设置aria-hidden="true"：

<p id="myElement" style="display: none;" aria-hidden="true">Hi there</p>

并且再次执行相同的$('#myElement').toggle()脚本将显示(切换)元素，并设置(切换) aria-hidden="false"：

<p id="myElement" style="display: block" aria-hidden="false">Hi there</p>

我可能想要使用方法的完整功能，也许类似于

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

什么是扩展.toggle() aria-hidden 以切换aria-hidden状态的最有性能的解决方案？

Answer 1

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

可访问技术以一种已经正确隐藏元素的方式支持CSS的display: hidden;属性。因此，从屏幕阅读器的角度来看，指定aria-hidden="true"与jQuery的.toggle()方法(将display属性设置为hidden )相比是多余的。指定aria-hidden="false" (或移除aria-hidden属性)对于jQuery的.toggle()方法来说是多余的，它将display属性设置为inline。

详情请参阅https://stackoverflow.com/a/10351673/1430996和福克纳的HTML5可访问性裁剪:隐藏和咏叹调博客文章(特别是“结果摘要”)。

Answer 2

接受的答案在精神上是正确的，但在具体问题上有一些问题：

1. CSS显示属性没有“隐藏”值--应该是“none”。
2. jQuery .toggle()不会在取消隐藏时将显示设置为“内联”；它将其设置为空白，返回到级联指示的任何值。因此，如果显示的计算值是“块”，则返回给它。