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

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

所以给定

Hi there

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

Hi there

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

Hi there

我可能想要使用该方法的完整function，也许是一些类似的东西

 $('#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：隐藏和咏叹调隐藏的博客文章（特别是“结果摘要”）。

Answer 2

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

1. CSS Display属性没有“隐藏”值 – 它应该是’none’。

2. 取消隐藏时，jQuery .toggle（）不会将显示设置为“内联”; 它将它设置为空白，这可以回落到级联指示的任何值。 因此，如果显示的计算值是’block’，那就是它返回的内容。