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

Question

我想配对WAI-ARIA 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>

我可能想使用 the method 的完整功能，也许类似于

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

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

Answer 1

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

Accessible Technology 支持 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和 Steve Faulkner的HTML5 Accessibility Chops: hidden and aria-hidden博客文章(特别是“结果摘要”)了解更多详细信息。