有没有办法编写屏幕阅读器会忽略的内容？答案

【问题标题】：Is there a way to write content that screen readers will ignore?有没有办法编写屏幕阅读器会忽略的内容？
【发布时间】：2017-05-31 11:13:41
【问题描述】：

我刚刚制作了一个页面，该页面需要让有视力的和有视觉障碍的用户都可以访问。内容的某些元素，只是由于仅与视觉元素相关的性质，根本不适用于使用屏幕阅读器的人。例如，一个链接在一个新窗口中打开了一个视听演示文稿，但由于我无法控制的情况，窗口的大小被调整得很尴尬，所以有一条消息说你应该调整窗口的大小，以便更好地查看所有内容。显然，对于无论如何都看不到的人来说，这是无用的信息。

是否有一种公认的方法可以让屏幕阅读器忽略某些内容？

【问题讨论】：

“视力障碍者和视力障碍者都可以访问” - 不幸的是，所有网站管理员都没有意识到这也适用于所有公共页面：-/

标签： html css accessibility

【解决方案1】：

实际上，正确的做法是使用 ARIA role=hidden。像这样：

<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" 也是如此。

【讨论】：

这是正确的答案，aria-hidden 得到了很好的支持，并且是为了确切目的而创建的，例如隐藏屏幕阅读器中的文本，同时将其保留在屏幕上。 w3c.github.io/using-aria
这似乎不是正确的答案.. ::before 和 ::after 呢？必要的用例： with span::before { content: 'but don-t read this' }
一些屏幕阅读器从content: 属性中读取文本，而一些屏幕阅读器则没有。在任何一种情况下，所有屏幕阅读器都会忽略带有aria-hidden="true" 属性的DOM 对象内的内容。如果您使用像:before 或::after 这样的伪元素，它们仍然是该DOM 对象的一部分，并且如果“父”具有aria-hidden="true"，则它们将被忽略。喜欢<span aria-hidden="true">Will be ignored</spanspan::before{content:'Will also be ignored';}。

【解决方案2】：

写到一半的问题我记得在哪里看。

CSS 可以做到这一点：

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

.dontRead {
    speak: none;
}

【讨论】：

可能不言而喻，但也改进了屏幕阅读器的定位。
又一次，我希望我可以修改 cmets。谢谢你的提示。很好的问题和答案:) +1 to alll
这真的适用于任何已知的屏幕阅读器吗？我的理解是屏幕阅读器完全忽略了这一点，所以它没有任何效果。请记住，尽管有名称，但屏幕阅读器在其演示文稿中并不是严格意义上的“听觉”；许多人还通过盲文输出。
这不适用于 JAWS。使用这个不起作用。

【解决方案3】：

检查一下

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

因为 role="presentation" 和 tabindex="-1" 屏幕阅读器会忽略上面的标签。

我在 ie8 和 firefox 3.5 上检查了它，它与 JAWS 屏幕阅读器一起使用。

【讨论】：

这实际上只覆盖了heading 的隐含角色，并使
不可聚焦（它不是开始的）。但是，屏幕阅读器仍会阅读此内容。请改用aria-hidden="true"。

【解决方案4】：

CSS 具有这些听觉属性，但由于它们没有在任何地方实现，它们完全没用。

【讨论】：

屏幕阅读器永远不会看到 CSS - 他们只是查看浏览器（IE 或最新版本的 Firefox）通过其可访问性界面公开的内容，并且浏览器无法识别听觉样式:-(屏幕阅读器是一种浏览器的常见误解。实际上，它们是操作系统扩展程序，旨在读取许多现有程序的输出。（我注意到前一年在 Jaws 网站上的大多数错误报告，最广泛- 使用的屏幕阅读器，与它与 Excel 和 Word 的使用有关，而不是 Web 浏览器，尽管现在这可能已经改变了。）

【解决方案5】：

对辅助技术用户隐藏特定信息的问题在于，它假设他们是在某个黑暗的房间里单独使用您的软件，这根本不是一个安全的假设。许多辅助技术用户与其他用户（与此信息相关）密切合作，一些非常幸运的人甚至拥有助手。明智的做法是为他们降低对这些内容的强调或优先级，而是以某种方式将其放在文档的后面。

【讨论】：

不可聚焦（它不是开始的）。但是，屏幕阅读器仍会阅读此内容。请改用aria-hidden="true"。

不可聚焦（它不是开始的）。但是，屏幕阅读器仍会阅读此内容。请改用`aria-hidden="true"`。