Question

我们说我在HTML中有以下句子：

Please enter your licence number

屏幕阅读器误读了“许可证”这个词。 as＆＃34; liss-ens＆＃34; （拼音）。它应该发音＆＃34; lice-ens＆＃34; （拼音）。

我想通过向屏幕阅读器提供语音拼写来解决这个问题，同时让文本在视觉上看起来是一样的。

我可以使用 s，aria-属性和样式，如下所示：

Please enter your licencelicense number

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

＆＃34;请输入您的＆＃34; ...... [VO] + [右箭头] ......＆＃34; lice-ens＆＃34; ... [VO] + [右箭头] ......＆＃34;数字＆＃34;

我希望屏幕阅读器能够顺利地读出句子而不会暂停。

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

Answer 1

别。

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

大多数屏幕阅读器用户已经熟悉他们的工具使用单词的方式，与缩写，日期，时间等相关的怪癖。通过尝试覆盖它，您可能会有混淆用户的风险。

如果您与屏幕阅读器用户交谈，您可能会发现这是真的。在本周的WebAIM邮件列表中再次出现这是一个非常常见的问题：http://webaim.org/discussion/mail_message?id=34398

请注意该帖子中有见地的评论：

事实上，有时候如果你非常认真地听屏幕阅读器用户说话，你会发现我们会像屏幕阅读器一样发音 - 我们甚至都不知道。

绝对不尝试重新定位<ruby>。一般来说，如果你不理解一个元素，那就不要使用它，当然不是一个黑客。这可能会给试图自动翻译内容的人带来麻烦。

此外，如果您不准备test it across all screen reader and platform combinations（包括每个屏幕阅读器和浏览器配对的多个版本），请不要使用黑客。

最后，请记住关于1/3 of screen reader users have vision，所以有时强制发音会弄乱他们在屏幕上看到的内容。

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属性（仅允许非空白值）覆盖。阅读句子或段落时没有描述角色。

如何在一个句子中覆盖一个单词的屏幕阅读器发音，而不会在句子中间暂停？

3 个答案: