如何限制屏幕阅读器不阅读特定文本？答案

【问题标题】：How to restrict screen reader to not read a certain text?如何限制屏幕阅读器不阅读特定文本？
【发布时间】：2018-05-04 07:36:37
【问题描述】：

想象一下，我有一个 <div> 和 aria-label 作为“阅读此内容”（aria-label 在运行时添加）。在<div> 内，我有一个<span>，上面写着“请勿阅读”。

现在 Jaws 正在做的是，它同时读取文本（“阅读此内容”和“不要阅读此内容”）。

<div aria-label="Read this">
  <span>Do not read this</span>
</div>

期望只阅读“阅读此内容”。有没有限制屏幕阅读器强制停止阅读文本？

【问题讨论】：

“现在 Jaws 正在做的是，它会读取文本（“阅读此内容”和“不要阅读此内容”）。”我很想知道您使用什么 JAWS 版本和浏览器/版本来获得此结果。使用这个测试用例s.codepen.io/stevef/debug/deVXag JAWS 2018 并没有像我预期的那样读取 Firefox/Chrome/IE 中的 aria-label。参考w3c.github.io/using-aria/#label-support
@SteveFaulkner Jaws 2018 和 Chrome 66.0
我已经像以前一样使用codepen.io/stevef/pen/deVXag 重新测试了这个，我无法让 JAWS 2018 和 Chrome 66 读取 aria-label

【解决方案1】：

aria-hidden="true" 是你想要的东西

<div aria-label="Read this">
<span aria-hidden="true">Do not read this</span>
</div>

请注意，并非所有屏幕阅读器都会读取 div 元素上的 aria-label，并且会导致空白元素

【讨论】：

我试过这个。但它不适用于使用屏幕阅读器 JAWS 的 chrome
aria-hidden 在所有屏幕阅读器和浏览器上均受支持，并且是正确答案。我刚刚用jaws2018 尝试过，当@Adam 声明使用虚拟光标（上/下箭头）时，chrome 和下巴将完全跳过该元素。然后我给了<div> 一些随机角色，以便可以计算出它的可访问名称，而我听到的只是“阅读此内容”，因此它可以按您的意愿工作。但是，我的测试用例按原样使用了 Adam 的代码。我没有按照您的 OP 状态以编程方式将 aria-label 添加到 <div>。
“然后我给了
一些随机角色，以便可以计算出它的可访问名称，我听到的只是“阅读这个”，所以它可以按照你的意愿工作。”是的，aria-label 将在使用某些角色时公布。但是您需要小心使用对语义有意义的角色，而不仅仅是添加一个角色来让aria-label 被宣布。

【解决方案2】：

适用于 JAWS 2018，chrome 72：

<div role="text" aria-label="Read this">
Do not read this
</div>

【讨论】：

role="text" 不是“官方”支持的角色。它通常有效，但如果你使用它，你必须小心。对它的支持参差不齐，并且对于当前工作的屏幕阅读器+浏览器组合，它很容易在下一个版本中停止工作。如果您尝试符合 WCAG，则使用 role="text" 将在 html 解析器 (html5.validator.nu) 中被标记为错误，从而违反 WCAG 4.1.1。