查找所有 display:none 属性并使用 JavaScript 添加 aria-hidden 属性答案

【问题标题】：Find all display:none attributes and add in aria-hidden attribute using JavaScript查找所有 display:none 属性并使用 JavaScript 添加 aria-hidden 属性
【发布时间】：2015-08-28 14:32:41
【问题描述】：

有没有办法搜索使用属性display:none 的所有实例并使用JavaScript 添加属性aria-hidden="true"。

我的网站有数百个这样的实例，我正在寻找一种更快的方法。

可能是这样的：（添加到函数中）

$(*).css( "display", "none" ).attr( "aria-hidden", "true" );

【问题讨论】：

stackoverflow.com/questions/1220834/…
$('*').filter(function(){ return $(this).css('display').toLowerCase().indexOf('none') > -1 }).attr("aria-hidden", "true");

标签： javascript jquery accessibility wai-aria

【解决方案1】：

aria-hidden="true" 的作用是指示浏览器不将元素暴露给可访问性树，即使它没有隐藏。

浏览器不会向可访问性 API 公开任何 display:none 元素。

因此，您尝试做的事情完全是多余的。它将对可访问性产生绝对零的额外影响。节省自己的精力，做一些更有成效的事情。

【讨论】：

屏幕阅读器仍会读出具有 display:none 属性的内容，因此实际上需要 aria-hidden
@RAS 绝对是罂粟花
@RAS 这里是对其中一个规范的引用，该规范讨论了何时不应将内容暴露给可访问性树w3.org/TR/core-aam-1.1/#h-exclude_elements2
@Tin display: none 和 visibility: hidden 都不会被 SR 公开。其他声明可能会或可能不会取决于 SR（opacity:0 等），但这两个声明使用起来非常安全

【解决方案2】：

使用hidden()选择器识别所有显示无元素

$( ":hidden").attr( "aria-hidden", "true" );

DEMO

【讨论】：

【解决方案3】：

编辑：

您可以使用过滤器，但这不是最佳解决方案：

$("*").filter(function() { return $(this).css("display") == "none" })

【讨论】：

他正在寻找添加 ARIA，而不是检测它。