在屏幕阅读器中暂停以获得可访问性

Question

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

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

我觉得这样做真的很脏，但如果我不这样做，那么它要么破坏设计，要么在一个无法理解的连续句子中阅读。

有没有人有这种事情的经验可以提供？

Answer 1

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

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

Answer 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字符串对于人类来说读取/理解/编辑的速度更快。
• 😄 使用aria-label比隐藏元素少。
• 😄 可以更新测试以在aria-label查找特定字符串。 快照也会捕捉变化，但开发人员必须意识到这一点。

关于隐藏元素的思考

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

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

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

---

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

Answer 3

问这个问题已经有一段时间了，但值得注意的是，问题中提出的技术没有任何问题。 我可以确认当前版本的 Jaws，Jaws 18.0，将暂停逗号或句点，这与冒号或项目符号等标记不同，这些标记是直接宣布的。 当前版本的 iOS VoiceOver 也可以很好地暂停逗号。 你的标点符号（如果它不是你设计的一部分）可以通过上面建议的仅屏幕阅读器的 CSS隐藏，或者，在适当的情况下，aria-label 属性可以包含暂停的标点符号。