在屏幕阅读器中暂停以获取可访问性答案

【问题标题】：Pausing in a screen reader for accessibility在屏幕阅读器中暂停以获取可访问性
【发布时间】：2013-03-30 19:27:56
【问题描述】：

我一直在使用 Mac OSX 的内置屏幕阅读器来测试我的网站，我知道这不是最好的，但我目前只有这些。但是我发现它并没有在元素的末尾暂停……这是有道理的；但我发现自己放置了隐藏句点以使内容可读：

<div class="breakdown">
    <strong>35</strong> New<span class="visuallyhidden">.</span><br>
    <strong>4</strong> Overdue<span class="visuallyhidden">.</span>
</div>

我觉得这样做很肮脏，但如果我不这样做，要么会破坏设计，要么会以无法理解的连续句子阅读。

有没有人有过这样的经历可以提供？

【问题讨论】：

标签： html css accessibility screen-readers

【解决方案1】：

如果您在语义上格式化代码，它应该可以正常工作。从您的 HTML 结构的外观来看，您使用 <br> 标记用于演示目的。这不是换行符的用途，因此不是标记的语义使用。

你特别希望每一行都是分开的，所以你应该把它们放在包装块级标签中。您可以将每一行包装在 p 或 div 标记中，然后屏幕阅读器会正确地将它们分开。

【讨论】：

HTML 结构的要点是，根据您的经验，（适当的）屏幕阅读器肯定会在
结束后创建“呼吸”或“暂停”（没有标点符号）？在这种情况下公平地说，也许
可以被认为是最具语义的元素，我知道它会暂停。另一个问题......我发现（再次使用 Mac 阅读器）当我这样做时：<span>Word </span>Word 它被读取的是“WordWord”而不是“Word Word”，无论空间在哪里......这纯粹是 Mac 阅读器的问题，还是所有屏幕阅读器的设计问题？
哈哈我不是屏幕阅读器方面的专家，但我假设他们如何遵循标记。跨度问题很奇怪，听起来像是 Mac 阅读器的错误。但我怀疑它们中的任何一个都是完美的。他们必须对如何阅读标记做出艰难的假设，这将不可避免地导致错误的结果。不过，您正在考虑它是件好事，正因为如此，您的网站的性能将优于 99.99% 的网站。
Christian 基本正确，添加更多语义会有所帮助。看起来 OP 正在使用 say all 命令，这将开始漫无目的。

【解决方案2】：

当您希望屏幕阅读器说出与标签的 html 标记中包含的内容不同的内容时，我建议您使用 aria-label。

我会将您的代码更新为：

<div class="breakdown">
  <span aria-label="35 New.">
    <strong>35</strong> New
  </span>
  <br>
  <span aria-label="4 Overdue.">
    <strong>4</strong> Overdue
  </span>
</div>

这样，屏幕阅读器将在每个周期完全停顿地说出以下内容：

35 新。 4 逾期。

我们专门针对 ChromeVox，但这应该适用于所有屏幕阅读器。

对`aria-label`的思考

? 因为要维护两个字符串，如果开发人员错过更新，它们可能会出现分歧。
? 本地化字符串时，使用的字符串将来自一个来源并被使用两次，从而减少了重复。
? 这就是 aria-label 的目的，以及我看到它在其他项目中经常使用的方式。
? aria-label 字符串对于人类来说阅读/grok/编辑的速度更快。
? 使用aria-label 的标记比隐藏元素少。
? 可以更新测试以查找 aria-label 中的特定字符串。快照也会捕获更改，但开发人员必须意识到这一点。

对隐藏元素的思考

? 减少字符串重复，预本地化。
? 使用 ChromeVox 快捷方式时，可能会到达一个地方，当用户浏览时，旁白将每个隐藏的逗号/句点视为一个单独的项目，而实际上它应该只是一个没有额外的句子标记。
? 带有大量 html 标记的字符串难以本地化，翻译人员也难以维护。
? 与aria-label 相比，额外的标记感觉很糟糕。如果用户在屏幕上选择了文本并且选择跨越了隐藏元素中的内容，则当用户执行 copy 命令时将复制隐藏内容，并在用户执行 粘贴命令。

考虑到所有优点/缺点，从长远来看，我敢打赌，您会发现选择 aria-label 将提供最佳的开发人员、翻译人员和用户可访问性体验。

如果元素由同级元素的文本内容描述，请考虑使用aria-labeledby 链接元素。

这个答案是在被问到 6 年后才出现的……但希望它会有所帮助。

【讨论】：

超级彻底的答案，可能更适合当今的开发环境、屏幕和阅读器。谢谢！
很好的答案和我现在正在解决的问题。但是，在您的情况下，建议使用 aria-labelledby，例如“如果有可见的文本标记元素，请改用 aria-labelledby。” ~developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/…
@bmd - 感谢您指出这一点。有细微的差别。当一个元素被兄弟元素“标记”时，aria-labelledby 更有用。但是对于此处原始问题中的具体示例，目标是提供一个 aria 标签来替换所有包含的元素。
请记住，当 aria-label 应用于 certain unsupported HTML 时，这可能会在验证时导致“可能滥用 aria-label”警告。

【解决方案3】：

问这个问题已经有一段时间了，但值得注意的是，问题中提出的技术没有任何问题。我可以确认 Jaws 的当前版本 Jaws 18.0 将暂停逗号或句点，这与直接宣布的冒号或项目符号等标记不同。 Current versions of iOS VoiceOver pause nicely for commas 也是。您的标点符号（如果它不是您设计的一部分）可以通过screen-reader only CSS 隐藏，如上文所述，或者，在适当的情况下，aria-label 属性可以包含暂停的标点符号。

【讨论】：

对aria-label的思考

对隐藏元素的思考

对`aria-label`的思考