html - 屏幕阅读器在到达 span 元素时停止

Question

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

例子:

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

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

注意:我使用的是 iPad 上“设置”>“通用”>“辅助功能”菜单中可用的画外音。

Answer 1

正如@vanita 和我在 Making an h2 tag with a strong tag inside accessible 中的评论所指出的那样从三年前开始，VoiceOver 就是这样工作的。元素之间可能存在某种语义意义，因此 VoiceOver 将在每个元素上停止。

不过，有一个解决方法，但它没有记录，仅影响 VoiceOver(不影响 JAWS 或 NVDA)。使用 role="text" .但是，由于它没有记录，因此您可能会面临它在 future 某个时候无法工作的风险。

请注意如何使用它，因为您不想失去标题的语义含义。让我们从最初的问题开始，像这样:

<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”被视为一个元素，并且仍然会说整个事情是一个标题。