屏幕阅读器是否可以读取具有 aria-hidden 和 css visible:hidden 属性的元素？

Question

我有一个移动菜单，我在桌面上使用visibility:hidden了该菜单visibility:hidden 。 如果可能，我还想在不使用display:none或hidden=hidden情况下从桌面上的屏幕阅读器中隐藏此菜单。

aria-hidden=true足以防止屏幕阅读器读出所有隐藏的菜单链接？

例如。 默认（屏幕阅读器看不到菜单内容）

<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="true" style="visibility:hidden">Menu Content</div>

例如。 活动（屏幕阅读器看到的菜单内容）

<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="false" style="visibility:visible">Menu Content</div>

我想阻止屏幕阅读器在激活切换器之前阅读所有菜单内容链接。

Answer 1

您的问题很难回答，因为每个屏幕阅读器（如每个浏览器）都将使用不同的功能实现。 最好的办法是选择您想要特别支持的屏幕阅读器，然后阅读他们的文档以确保您的网站按预期运行。 即便如此，您也可能需要进行一些实际测试。

根据WebAIM （截至 2014 年 1 月）：

• JAWS 是最常见的主要屏幕阅读器
• VoiceOver 和 NVDA 也很常用（超过 33%）

---

更新：根据WebAim 用户调查 #8（2019 年） ：

• NVDA 和 JAWS与主要屏幕阅读器并驾齐驱，占据了它们 80% 以上的市场份额。 VoiceOver 位居第三，市场份额约为 13%
• 讲述人也很常用（超过 30%）

---

根据http://webaim.org/techniques/css/invisiblecontent/ ：

 visibility: hidden; and/or display:none;

这些样式将对所有用户隐藏文本。 文本从页面的视觉流中移除并被屏幕阅读器忽略。 如果您希望屏幕阅读器阅读内容，请不要使用此 CSS。 但请务必将其用于您不想让屏幕阅读器阅读的内容。

 width:0px, height:0px or other 0 pixel sizing techniques

如上所述，因为从页面流中移除了一个没有高度或宽度的元素，所以大多数屏幕阅读器会忽略这个内容。 HTML 宽度和高度可能会给出相同的结果。 如果您希望屏幕阅读器阅读内容，请勿将内容大小设置为 0 像素。 使用 font-size:0px 或 line-height:0 样式的内容可能会起作用，但元素仍会占用屏幕上的水平空间。 所有这些技术都可能导致搜索引擎惩罚，因为它们可能被解释为恶意的。

 text-indent: -10000px;

这种方法将内容向左移动 10000 像素 - 因此离开可见屏幕。 实际值无关紧要，只要它位于屏幕外即可。 屏幕阅读器仍将阅读这种风格的文本。 但是，如果链接或表单元素被赋予这种样式，则可能会导致焦点指示符（围绕焦点链接的虚线或“行军蚂蚁”）从元素应位于页面中的位置延伸到该位置它实际上位于（向左的方式）。 这不是很漂亮。 这种方法也会导致从右到左的语言问题。 因此，如果元素不包含可导航元素，这种方法可能是一个可行的选择，尽管有更好的技术可用。

CSS 剪辑

position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);

使用 CSS 隐藏或剪辑不适合 1 像素可见区域的内容的相当现代的技术将从本质上隐藏内容可见，但仍允许现代屏幕阅读器阅读。

绝对定位屏幕外的内容

使用 CSS 将隐藏元素移动到屏幕外的位置通常被认为是视觉隐藏内容的最有用和最容易访问的方法。

根据http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/ ：

但是有一个问题（不是总是存在......）。 做了一个很简单的测试页面，发现浏览器和屏幕阅读器的支持还是有点欠缺。 在我可以使用的屏幕阅读器中，只有 VoiceOver 和 ChromeVox 会忽略用 aria-hidden 隐藏的内容。 JAWS 确实支持它（当与 Firefox 一起使用时），正如 John Foliot 在HTML5 Accessibility: aria-hidden and role="presentation"和 Steve Faulkner 在HTML5 Accessibility Chops: hidden and aria 中所做的更详细的测试所示-隐藏。 （约翰和史蒂夫都更详细地介绍了相关属性，因此我鼓励您阅读这两篇文章。）