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/1430996和Steve Faulkner的HTML5 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 回答