如何覆盖句子中单词的 screen-reader 发音而不让它在句子中间暂停?
How can I override a screen-reader's pronunciation of a word in a sentence without having it pause mid-sentence?
假设我在 HTML 中有以下句子:
<p>Please enter your licence number</p>
屏幕-reader 将单词 'licence' 误读为 "liss-ens"(拼音)。应该读作"lice-ens"(拼音)
我想通过向屏幕提供拼音来解决此问题-reader,同时让文本在视觉上看起来相同。
我可以使用 <span>
s,aria-
属性和样式如下:
<p>Please enter your <span aria-hidden="true">licence</span><span style="position: absolute; left: -10000em;">license</span> number</p>
这很好用,除了屏幕-reader(我正在 MacOS 上使用 VoiceOver 进行测试)在到达第一个跨度时暂停,迫使我按 [VO]+[向右箭头] 前进到下一个单词:
"Please enter your" ... [VO]+[向右箭头] ... "lice-ens" ... [VO]+[向右箭头] ... "number"
我希望屏幕-reader能够顺畅地读出句子而不会停顿
这可能吗?还是我不应该试图控制它?
我想我找到了解决办法。这似乎适用于 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
这会显示正确的字符串,并且还会不间断地用拼音读出它。
但我愿意接受 other/better 解决方案。或对问题本身的批评。 :)
不要。
真的,不用担心。我知道这听起来很老套,但这是基于多年与屏幕 reader 用户合作(并尝试做你想做的事情)的真实建议。
大多数屏幕 reader 用户已经熟悉他们的工具如何说出单词,以及与缩写、日期、时间等相关的怪癖。通过尝试覆盖它,您 运行 风险让您的用户感到困惑。
如果您与屏幕 reader 用户交谈,您可能会发现这是真的。这是一个非常普遍的问题,以至于它在本周的 WebAIM 邮件列表中再次出现:http://webaim.org/discussion/mail_message?id=34398
请注意该主题中这条富有洞察力的评论:
In fact, sometimes if you listen very carefully to a screen reader user talking, you can catch that we will pronounce words the same as our screen readers do--and we are not even aware of it.
绝对不要尝试重新利用<ruby>
。通常,如果您不理解某个元素,则不要使用它,当然也不要将其视为 hack。这可能会给尝试自动翻译内容的人带来问题。
此外,如果您不准备 (包括每个屏幕的多个版本 reader 和浏览器配对),请不要使用 hack。
最后,请记住关于 1/3 of screen reader users have vision,因此有时强制发音会与他们在屏幕上看到的内容混淆。
这有效,有点:
<span aria-label="license">licence</span>
如果 span
元素是 AT 的焦点,它将被宣布为具有 "group" 的角色,可以用 aria-roledescription
属性覆盖(仅 non-whitespace 值允许)。阅读句子或段落时不描述角色。
假设我在 HTML 中有以下句子:
<p>Please enter your licence number</p>
屏幕-reader 将单词 'licence' 误读为 "liss-ens"(拼音)。应该读作"lice-ens"(拼音)
我想通过向屏幕提供拼音来解决此问题-reader,同时让文本在视觉上看起来相同。
我可以使用 <span>
s,aria-
属性和样式如下:
<p>Please enter your <span aria-hidden="true">licence</span><span style="position: absolute; left: -10000em;">license</span> number</p>
这很好用,除了屏幕-reader(我正在 MacOS 上使用 VoiceOver 进行测试)在到达第一个跨度时暂停,迫使我按 [VO]+[向右箭头] 前进到下一个单词:
"Please enter your" ... [VO]+[向右箭头] ... "lice-ens" ... [VO]+[向右箭头] ... "number"
我希望屏幕-reader能够顺畅地读出句子而不会停顿
这可能吗?还是我不应该试图控制它?
我想我找到了解决办法。这似乎适用于 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
这会显示正确的字符串,并且还会不间断地用拼音读出它。
但我愿意接受 other/better 解决方案。或对问题本身的批评。 :)
不要。
真的,不用担心。我知道这听起来很老套,但这是基于多年与屏幕 reader 用户合作(并尝试做你想做的事情)的真实建议。
大多数屏幕 reader 用户已经熟悉他们的工具如何说出单词,以及与缩写、日期、时间等相关的怪癖。通过尝试覆盖它,您 运行 风险让您的用户感到困惑。
如果您与屏幕 reader 用户交谈,您可能会发现这是真的。这是一个非常普遍的问题,以至于它在本周的 WebAIM 邮件列表中再次出现:http://webaim.org/discussion/mail_message?id=34398
请注意该主题中这条富有洞察力的评论:
In fact, sometimes if you listen very carefully to a screen reader user talking, you can catch that we will pronounce words the same as our screen readers do--and we are not even aware of it.
绝对不要尝试重新利用<ruby>
。通常,如果您不理解某个元素,则不要使用它,当然也不要将其视为 hack。这可能会给尝试自动翻译内容的人带来问题。
此外,如果您不准备
最后,请记住关于 1/3 of screen reader users have vision,因此有时强制发音会与他们在屏幕上看到的内容混淆。
这有效,有点:
<span aria-label="license">licence</span>
如果 span
元素是 AT 的焦点,它将被宣布为具有 "group" 的角色,可以用 aria-roledescription
属性覆盖(仅 non-whitespace 值允许)。阅读句子或段落时不描述角色。