我正在做一些屏幕阅读器可用性测试,我想知道是否有人可以向我解释为什么屏幕阅读器到达<span />元素后会停止。

例子:

<h1><span class="style1">Today</span> is a wonderful <span class="style2">day</span></h1>

屏幕阅读器将阅读“今天”,然后停止阅读而不是阅读整个<h1 />文本。

注意:我正在使用iPad上“设置”>“常规”>“辅助功能”菜单中的旁白。

最佳答案

正如@vanita以及我三年前在Making an h2 tag with a strong tag inside accessible中的评论所指出的那样,这就是VoiceOver的工作方式。元素之间可能有一些语义上的意义,因此VoiceOver会在每个元素上停止。

虽然有一种解决方法,但是它没有记录,仅影响VoiceOver(不影响JAWS或NVDA)。使用role="text"。但是,由于它没有记录在案,因此您冒着将来无法使用它的风险。

请小心使用它,因为您不想失去标题的语义。让我们从最初的问题开始,像这样:

<h1>hello <strong>there</strong> world</h1>
<h1>hello <span class="myclass">there</span> world</h1>

嵌入元素是语义()还是语义()都没有关系。
role="text"不应将而不是直接放在

上,因为这样会删除标题的语义:
<h1 role="text">hello <strong>there</strong> world </h1> <!-- DO NOT DO THIS -->

而是将所有内部文本嵌入到中,并在内部跨度上指定role="text"
<h1><span role="text">hello <strong>there</strong> world</span></h1>

这将导致“hello there world”被视为一个元素,并且仍然会说整个事情都是标题。

关于html - 屏幕阅读器到达span元素时停止,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35925880/

10-10 18:34
查看更多