11

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

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

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

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

4

3 回答 3

11

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

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

于 2013-04-08T16:11:00.433 回答
10

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

我会将您的代码更新为：

<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，并在用户执行命令时粘贴paste。

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

如果元素由兄弟元素的文本内容描述，请考虑使用aria-labeledbyto 链接元素。

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

于 2019-03-21T04:01:06.070 回答
1

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

于 2017-08-29T16:10:26.517 回答