Question

我有一个移动菜单，我隐藏在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月）：

根据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会忽略隐藏有咏叹调隐藏的内容。 JAWS确实支持它（当与Firefox一起使用时），John Foliot在HTML5 Accessibility: aria-hidden and role="presentation"和Steve Faulkner在HTML5 Accessibility Chops: hidden and aria-hidden中进行的更为详细的测试表明了这一点。（John和Steve都会详细介绍相关属性，所以我鼓励你阅读这两篇文章。）

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

1 个答案:

CSS剪辑

绝对在屏幕外定位内容