我正在做一些屏幕阅读器可用性测试,我想知道是否有人可以向我解释为什么屏幕阅读器到达<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/
<h1 role="text">hello <strong>there</strong> world </h1> <!-- DO NOT DO THIS -->
<h1><span role="text">hello <strong>there</strong> world</span></h1>
关于html - 屏幕阅读器到达span元素时停止,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35925880/