如何覆盖屏幕阅读器对句子中单词的发音而不使其在句子中暂停？

Question

假设我有以下 HTML 句子：

<p>Please enter your licence number</p>

屏幕阅读器将“licence”一词误读为“liss-ens”（语音拼写）。它应该发音为“lice-ens”（拼音）。

我想通过向屏幕阅读器提供拼音拼写来解决此问题，同时让文本在视觉上看起来相同。

我可以使用

<span>

s、

aria-

属性和样式，如下所示：

<p>Please enter your <span aria-hidden="true">licence</span><span style="position: absolute; left: -10000em;">license</span> number</p>

这工作得很好，除了屏幕阅读器（我在 MacOS 上使用 VoiceOver 进行测试）在到达第一个跨度时暂停，迫使我按 [VO]+[右箭头] 前进到下一个单词：

“请输入您的”... [VO]+[右箭头] ...“lice-ens”...[VO]+[右箭头] ...“号码”

我希望屏幕阅读器能够流畅地读出句子而无需暂停。

这可能吗？或者我不应该试图控制这个？

Answer 1

不要。

真的，不用担心。我知道这听起来很老套，但这是基于多年与屏幕阅读器用户合作（并尝试做您想做的事情）的真实建议。

大多数屏幕阅读器用户已经熟悉他们的工具如何朗读单词，以及与缩写、日期、时间等相关的怪癖。尝试覆盖它，您可能会面临让用户感到困惑的风险。

如果您与屏幕阅读器用户交谈，您可能会发现这是真的。这是一个非常常见的问题，以至于它再次出现在本周的 WebAIM 邮件列表中。

请注意该线程中这条富有洞察力的评论：

事实上，有时如果您仔细聆听屏幕阅读器用户的讲话，您会发现我们会像屏幕阅读器一样发音，而我们甚至没有意识到这一点。

绝对不要尝试改变用途

<ruby>

。一般来说，如果您不理解某个元素，那么就不要使用它，当然也不要将其用作黑客。这可能会给尝试自动翻译内容的人带来问题。

此外，如果您不准备在所有屏幕阅读器和平台组合（包括每个屏幕阅读器和浏览器配对的多个版本）上进行测试，请不要使用黑客。

最后，请记住，大约 1/3 的屏幕阅读器用户有视力，因此有时强制发音会扰乱他们在屏幕上看到的内容。

Answer 2

我想我找到了解决方案。这似乎适用于 MacOS 上的 VoiceOver。 （尚未使用其他屏幕阅读器（例如 JAWS）进行测试。）

解决方案是重新调整

<ruby>

元素的用途，使用 CSS 覆盖其样式：

Please enter your 
<ruby>
  <rt aria-hidden="true" style="font-size: 1em"><!--Standard-->licence</rt>
  <rt style="display: inline-block; width: 1px; height: 1px; overflow: hidden"><!--Phonetic-->license</rt>
</ruby>
 number

这会显示正确的字符串，并且还会不间断地用拼音发音读出它。

但我愿意接受其他/更好的解决方案。或者对问题本身的批评。 :)

Answer 3

这有效，有点：

<span aria-label="license">licence</span>

如果

span

元素是 AT 的焦点，则会将其声明为具有“组”角色，可以使用

aria-roledescription

属性覆盖（仅允许非空白值）。阅读句子或段落时未描述角色。