有没有一种方法可以编写屏幕阅读器会忽略的内容？

Question

我刚刚在处理一个需要对视觉障碍用户和正常用户都适用的页面。有些内容元素只与视觉元素相关，显然不适用于使用屏幕阅读器的人。例如，一个链接会在新窗口中打开一个音频-视频演示，但由于某些无法控制的情况，窗口被尺寸调整得很别扭，因此会出现一条消息，建议您调整窗口大小以便更好地查看所有内容。显然，对于无法看到它的人来说，这是无用的信息。

是否有接受的方式可以使屏幕阅读器忽略某些内容？

- nickf

---

“which needs to be accessible to both sighted and visually impaired users” 的意思是“需要让有视力和视力受损的用户都能够使用”。不幸的是，所有网站管理员并没有意识到这个要求同样适用于所有公共页面 :-/。 - Kai

Answer 1

实际上，正确的做法是使用ARIA属性aria-hidden="true"。像这样：

<button type="button">
  <span aria-hidden="true" class="icon">&gt;</span>
  <span class="hide">Go!</span>
</button>

通过这样做，您可以隐藏>字符，以便屏幕阅读器不会读取“右尖括号”，而是读取“Go！”。如果您在.hide类中视觉上隐藏内容，则有视力的用户只会看到>。就像这样：

.hide{
  position: absolute;
  left:-999em;
}

ARIA角色presentation用于“规范化”语义含义，例如带有role="presentation"的<table>不会被读作表格内容，而只是纯文本。

如果您不希望图像被阅读，可以像这样放置空的alt文本：

<img src="decorative-flower.jpg" alt=""/>

如果它是一个<svg>，则省略<title>和<description>

<svg>
  <!-- <title>Remove this line</title> -->
  <!-- <description> Remove this too..</description> -->
</svg>

我注意到在一些罕见的情况下，一些屏幕阅读器仍然会读取空的alt图像，因此您也可以在这里使用aria-hidden="true"。

CSS的speak属性目前不受支持，链接属性media="aural"也是如此。

- Daniel Göransson

---

这是正确的答案，“aria-hidden”得到了很好的支持，并且被创建出来的目的正是为了在屏幕上保留文本的同时，将其从屏幕阅读器中隐藏。https://w3c.github.io/using-aria/ - Null

这似乎不是正确的答案...那::before和::after呢？使用情况需要：用<span aria-hidden="true">read this</span>，并使用span::before { content: 'but don-t read this' }。 - roberto tomás

有些屏幕阅读器可以读取“content:”属性中的文本，而有些则不能。在任一情况下，所有屏幕阅读器都会忽略带有 aria-hidden="true" 属性的 DOM 对象内的内容。如果您使用伪元素像 :before 或 ::after，它们仍然是该 DOM 对象的一部分，并且如果“父级”具有 aria-hidden="true"，则它们将被忽略。例如 <span aria-hidden="true">将被忽略</span> span::before{content:'也将被忽略';}。 - Daniel Göransson

Answer 2

在写问题的过程中，我想起了应该去哪里查找。

CSS可以做到这一点：

<span class="dontRead">Screen readers shouldn't read this</span>

.dontRead {
    speak: none;
}

- nickf

---

可能不用特别说明，但是<link rel="stylesheet" type="text/css" href="..." media="aural" />也可以提高屏幕阅读器的目标定位能力。 - Ron DeVera

又一次我希望能够修改评论。谢谢那个提示。好问题和答案！+1给大家。 - Darko

这确实能在任何已知的屏幕阅读器上使用吗？我的理解是屏幕阅读器会直接忽略它，因此不会产生任何效果。请注意，尽管名称中包含"aural"，但屏幕阅读器在呈现方面并不严格依赖听觉；许多屏幕阅读器也可以通过盲文输出。 - BrendanMcK

这在JAWS上不起作用。使用它也不行。 - harryBundles

Answer 3

检查这个

<h1 role="presentation" tabindex="-1">Some text that screen readers will ignore </h1>

由于`role="presentation"`和`tabindex="-1"`，屏幕阅读器将忽略上述标签。

我在IE8和Firefox 3.5上使用JAWS屏幕阅读器进行了检查，它能够正常工作。

- shuklendu

---

这实际上只是覆盖了 heading 的隐式角色，并使 <h1> 无法聚焦（它本来就不是）。然而，屏幕阅读器仍会读取此内容。请改用 aria-hidden="true"。 - Null

Answer 4

CSS有一些听觉属性，但由于它们在任何地方都没有被实现，所以它们完全无用。

- NickFitz

---

屏幕阅读器无法识别CSS样式，它们只会查看浏览器（如IE或最新版本的Firefox）通过其辅助功能接口公开的内容。同时，浏览器也无法识别声音样式 :-(一个常见的误解是屏幕阅读器是一种浏览器。实际上，它们是操作系统的扩展程序，旨在读取许多现有程序的输出。去年我注意到，最广泛使用的屏幕阅读器Jaws网站上大多数错误报告都与其在Excel和Word中的使用相关，而非网页浏览器，尽管现在情况可能已经有所改变。 - NickFitz

Answer 5

在协助技术用户中隐藏特定信息的问题在于，这假设他们独自在某个黑暗的房间使用您的软件，这显然是不安全的假设。许多协助技术用户与其他用户密切合作（这些信息对他们很重要），一些非常幸运的用户甚至有助手。您最好将其放置在文档后面，以降低或减少对他们的重视。

- Bruno Torquato