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

Question

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

例：

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

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

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

Answer 1

正如@vanita 和我三年前在制作带有强大标签的 h2 标签中的评论所指出的，这就是 VoiceOver 的工作原理。元素之间可能存在一些语义意义，因此 VoiceOver 将在每个元素上停止。

不过，有一个解决方法，但它没有记录，并且仅影响 VoiceOver（不影响 JAWS 或 NVDA）。使用role="text"。但是，由于它没有记录，您将面临它在未来某个时候无法工作的风险。

请小心使用它，因为您不想丢失标题的语义。让我们从最初的问题开始，如下所示：

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

嵌入元素是语义的 (<strong>) 还是非语义的 (<span>) 并不重要。

role="text"不应直接放在 <h1> 上，因为这会消除标题的语义：

<h1 role="text">hello <strong>there</strong> world </h1> <!-- DO NOT DO THIS -->

相反，将所有内部文本嵌入 <span> 中并role="text"在内部范围上指定。

<h1><span role="text">hello <strong>there</strong> world</span></h1>

这将导致“hello there world”被读取为一个元素，并且仍然会说整个内容是一个标题。