5

我想将WAI-ARIAaria-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什么?

4

2 回答 2

4

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

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

请参阅https://stackoverflow.com/a/10351673/1430996Steve FaulknerHTML5 Accessibility Chops: hidden and aria-hidden博客文章(特别是“结果摘要”)以了解更多详细信息。

于 2013-01-31T21:39:55.627 回答
3

公认的答案在精神上是正确的,但在细节上存在一些问题:

  1. CSS Display 属性没有“隐藏”值——它应该是“无”。

  2. jQuery .toggle() 在取消隐藏时不会将显示设置为“内联”;它将其设置回空白,这将回退到级联规定的任何值。因此,如果显示的计算值是“块”,那就是它返回的值。

于 2016-04-13T21:23:43.693 回答