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

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相比，额外的标记感觉很笨拙。如果用户选择屏幕上的文本，并且选择内容跨越隐藏元素中的内容，则当用户执行 copy 命令时将复制隐藏的内容，而当用户执行粘贴命令。

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

---

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

Answer 3

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