将WAI-ARIA支持添加到jQuery的.toggle()方法

Question

将WAI-ARIA支持添加到jQuery的.toggle()方法

jqueryaccessibilitywai-aria

5

我想将WAI-ARIA aria-hidden支持与jQuery的.toggle()方法配对使用。

所以，给定你好

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

你好

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

你好

我可能想要使用该方法的完整函数，大概是这样：

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

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

- Jeromy French

1

好奇，但你为什么想这样做呢？屏幕阅读器（以及浏览器实现的平台辅助功能API）已经知道display:none意味着元素被隐藏，因此无论如何都会忽略它。使用aria-hidden的主要原因是如果内容以其他方式被隐藏（例如变成透明或放在屏幕外），那么需要明确告诉浏览器和屏幕阅读器将其视为隐藏。 - BrendanMcK

哇塞...@BrendanMcK的评论促使我检查了一些事实。我没有意识到自己对ARIA的了解是多么匮乏。我从http://filamentgroup.com/dwpe/上得到了将CSS显示特性与匹配的aria-hidden状态配对的想法；尽管在他们的辩护中，这本书是在2010年出版的，当时这些细节可能有所不同。现在我从http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/等网站上看到，这完全取决于CSS。因此，我现在质疑aria-hidden的效用。 - Jeromy French

@BrendanMCK...我可以有两个方向来解决这个问题：1）接受“别烦我，笨蛋”，或者2）修改我的问题，将HTML的hidden属性与.toggle()配对使用。 - Jeromy French

我的意见是保持原样就可以了。display:none 这个习惯用法已经非常成熟，任何可行的辅助工具都需要理解它。在某些假设的未来场景中，HTML5 的 hidden 可能是更好的选择 - 它的优点是不依赖于 CSS，但即使它也有一些怪癖（例如不应该用它来隐藏选项卡）。aria-hidden 的一个很好的使用示例是当一个灯箱弹出到前景时，页面的其余部分可见但被变灰；aria-hidden 可以作为一种方式来表明“用户实际上无法阅读这个内容，所以将其视为隐藏”。 - BrendanMcK

1

由于其他人可能会从这个过程中受益，我将创建一个“答案”，记录这些细节。然后我将创建第二个问题，用于向.toggle()添加HTML hidden属性。 - Jeromy French

2个回答

3

被接受的答案在精神上是正确的，但在细节上存在一些问题：

CSS Display属性没有“hidden”值，应该是“none”。
jQuery .toggle()在取消隐藏时不会将display设置为“inline”；它会将其设回空白，然后由级联规则决定显示哪个值。因此，如果display的计算值为“block”，那么它就会返回到“block”。

- michai

如果您看到需要改进的答案，请随时单击答案下方的“编辑”链接并进行所需更改。您可以在编辑屏幕上留下有关所做更改和原因的评论。感谢您的帮助！ - Andrew Kozak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeromy French · Accepted Answer

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

无障碍技术支持CSS的 display：hidden;属性，以正确隐藏元素。因此，指定 aria-hidden =“ true”会从屏幕阅读器的角度看来是多余的，与jQuery的 .toggle（）方法将 display 属性设置为 hidden 相同。指定 aria-hidden =“ false”（或删除 aria-hidden 属性）对于jQuery的 .toggle（）方法将 display 属性设置为 inline 是多余的。

有关详细信息，请参见https://dev59.com/emkv5IYBdhLWcg3wxzyA#10351673和Steve Faulkner的HTML5 Accessibility Chops: hidden and aria-hidden博客文章(特别是“结果摘要”)。