上，因为这样会删除标题的语义：

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

相反，将所有内部文本嵌入到中，并在内部跨度上指定`role="text"`。

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

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

Question

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

示例：

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

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

注意：我在设置＆gt;中使用iPad上可用的语音。一般＆gt;辅助功能菜单。

Answer 1

这是某些屏幕阅读器在遇到其他元素中的元素时的行为。经常使用诸如屏幕阅读器之类的辅助技术的人可能会习惯于此，所以我建议保持现状。

Answer 2

正如@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> 

相反，将所有内部文本嵌入到中，并在内部跨度上指定role="text"。

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

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

Answer 3

另一种解决方法是使用替代的隐藏内容。

例如：
<h1>This is a <b>bolder</b> word.</h1>
VO 可能只读出“这是一个”然后停止

添加隐藏内容：

<div>
  <h1 aria-hidden="true">This is a <b>bolder</b> word.</h1>
  <span class="hidden-text"> This is a bolded word.</span>
</div>

.hidden-text 的 CSS 样式：

.hidden-text{
  position absolute;
  opacity: 0;
}

您将它们包裹在同一个 div 中的原因是，它允许焦点框旁的语音正确定位该区域。

这对我有用，我希望它也对你有用！

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

3 个答案: