具有 aria-hidden 和 css visibility:hidden 属性的元素是不是会被屏幕阅读器读取？

Posted 2023-03-12

【中文标题】具有 aria-hidden 和 css visibility:hidden 属性的元素是不是会被屏幕阅读器读取？

【英文标题】：Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?具有 aria-hidden 和 css visibility:hidden 属性的元素是否会被屏幕阅读器读取？

【发布时间】：2015-05-04 18:05:09

【问题描述】：

我有一个移动菜单，我用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>

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

【参考方案1】：

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

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

JAWS is the most common primary screen reader VoiceOver and NVDA were also commonly used (over 33%)

---

更新：根据WebAim User Survey #8 (2019)：

NVDA and JAWS are neck-and-neck 用于主屏幕阅读器，占据它们之间 80% 以上的市场份额。 VoiceOver 以约 13% 的市场份额位居第三 Narrator is also commonly used (over 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-hidden 所做的更详细的测试所示。 （John 和 Steve 都更详细地介绍了相关属性，因此我鼓励您阅读这两篇文章。）

【讨论】：

我害怕这种回答，但我必须接受现实。感谢您的信息。

@chris - 请注意 aria-hidden 文章来自 2012 年。我敢打赌大多数屏幕阅读器现在都会支持它，但您必须逐个检查。不幸的是，我很难在几分钟内找到前 3 大屏幕阅读器的详细文档，因此您可能需要付出一些努力。

你所说的选择一些读者来支持并在我的网站上进行物理测试听起来是唯一确定的方法。似乎页面加载时间和冲突的 CSS 规则也会导致意外结果。

我想知道为什么那篇文章没有提到 NVDA？无论如何，我在 Chrome 42 的 Windows 8.1 上使用 NVDA 进行了测试。 aria-hidden 工作正常。 :) 虽然屏幕外确实可以提供最好的支持。我在一些网站上看到了这种做法。