如何让VoiceOver将多个span元素合并为一个朗读项？

遇到这种因为样式拆分文本导致VoiceOver需要多次滑动才能读完内容的情况，有几个实用的解决办法：

方法1：用CSS伪元素实现样式，保留完整文本节点 #

如果只是给文本前缀/后缀加样式，完全不用拆分HTML结构，用CSS伪元素就能搞定。这样HTML里的文本是完整的，VoiceOver自然会一次性朗读，同时视觉样式也能保留。

示例代码：

<div class="reminder">Don't forget your appointment.</div>

.reminder::before {
  content: "Note: ";
  color: red;
}

方法2：用role="text"合并多个文本节点 #

如果必须拆分文本（比如给句子中间的某个词加样式），可以给父容器加上role="text"，告诉辅助技术把里面的多个元素当成一个连续的文本块来处理。

示例代码（红色前缀）：

<div role="text">
  <span style="color:red">Note: </span>
  <span>Don't forget your appointment.</span>
</div>

示例代码（中间加粗）：

<div role="text">
  My <span style="font-weight:bold">important</span> task needs to be done today.
</div>

方法3：隐藏装饰性元素，保留完整可读文本 #

如果某些样式元素只是视觉装饰，不需要被辅助技术识别，可以给这些元素加上aria-hidden="true"，同时在容器里放一个视觉隐藏的完整文本，确保VoiceOver读取完整内容。

示例代码：

<div class="reminder">
  <span style="color:red" aria-hidden="true">Note: </span>
  <span>Don't forget your appointment.</span>
  <span class="visually-hidden">Note: Don't forget your appointment.</span>
</div>

对应的视觉隐藏CSS：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

这几种方法都能解决VoiceOver拆分朗读的问题，根据你的实际场景选就行。

内容的提问来源于stack exchange，提问作者user984003