Question

我想将WAI-ARIA aria-hidden支持与jQuery的.toggle（）方法配对。

所以给定Hi there

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

Hi there

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

Hi there

我可能想要使用the method的完整功能，可能是

的内容

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

将[{1}}扩展为.toggle()状态的最佳效果解决方案是什么？

Answer 1

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

Accessible Technology以一种已正确隐藏元素的方式支持CSS的display: hidden;属性。因此，从屏幕阅读器的角度来看，指定aria-hidden="true"是多余的，而jQuery的.toggle()方法将display属性设置为hidden是多余的。指定aria-hidden="false"（或删除aria-hidden属性）对于将.toggle()属性设置为display的jQuery的inline方法来说是多余的。

有关详细信息，请参阅https://stackoverflow.com/a/10351673/1430996和Steve Faulkner的HTML5 Accessibility Chops: hidden and aria-hidden博文（特别是“结果摘要”）。

Answer 2

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

没有隐藏的＆＃39; CSS Display属性的值 - 它应该是＆＃39; none＆＃39;。
jQuery .toggle（）没有将显示设置为＆＃39; inline＆＃39;什么时候不隐藏;它将它设置为空白，这可以回落到级联指示的任何值。因此，如果显示的计算值是＆＃39; block＆＃39;那就是它返回的内容。

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

2 个答案: