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

Question

我正在进行一些屏幕阅读器的可用性测试，我想知道为什么当屏幕阅读器遇到一个 <span /> 元素时会停止。

示例：

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

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

注意：我正在使用iPad设置中的“通用”>“辅助功能”菜单中提供的VoiceOver功能。

- Commodore Timo

---

еңЁй—®йўҳеҰӮдҪ•дҪҝеҢ…еҗ«spanгҖҒ strongгҖҒ bзӯүе…ғзҙ зҡ„h2ж ҮзӯҫеҸҜи®ҝй—®дёӯпјҢи®Ёи®әдәҶеҗҢж ·зҡ„й—®йўҳгҖӮ - unor

在 span 中的 role="text" - FSDford

Answer 1

正如@vanita所说，以及我在三年前的评论中所提到的（使带有strong标签的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>），都没有关系。

应该不要直接在<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"被视为一个元素，并仍然将整个内容视为标题。最初的回答。

- slugolicious

Answer 2

当屏幕阅读器在其他元素中遇到元素时，它们的行为就是这样。经常使用辅助技术如屏幕阅读器的人可能已经习惯了这种情况，因此建议保持原样。

- Vanita

---

这真的是这个问题被普遍接受的答案吗？ - David

直到有非常有创意的人想出更好的解决方案，我想就这样吧。 - FSDford

Answer 3

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

例如：
<h1>这是一个<b>更加突出</b>的词语。</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中的原因是，这样语音提示框就可以适当地定位到该区域。

这对我很有效，希望对你也有用！

- Eddie Lam