如何让屏幕阅读器同时读取aria-label值与元素原始内容

根据WAI-ARIA可访问名称计算规范，给元素设置aria-label属性后，属性值会直接覆盖元素的原生文本内容作为可访问名称，不存在拼接读取的逻辑，这是所有主流屏幕阅读器遵循的标准行为，并非实现bug。

方案1：屏幕阅读器专属前置文本（最推荐，兼容性最好） #

使用专门的屏幕阅读器只读样式类，将需要前置朗读的文本放在视觉隐藏的span节点中，排在原生业务内容前面，即可实现按顺序朗读的效果，完全不需要修改aria-label属性，业务内容始终保留在元素原生位置，符合开发规则。

首先定义全局通用的屏幕阅读器专属样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

页面结构写法：

<p>
  <span class="sr-only">Participant</span>
  Martin Clark
</p>

该方案在NVDA、JAWS、VoiceOver等所有主流屏幕阅读器上均能稳定输出「Participant Martin Clark」的朗读结果，视觉上不会展示额外的前置文本，不影响正常页面布局。

方案2：使用aria-labelledby按顺序关联文本节点 #

如果需要通过ARIA属性显式关联朗读顺序，可以给前置提示文本、原生内容元素分别分配id，通过aria-labelledby按期望朗读顺序传入id列表，屏幕阅读器会按顺序拼接读取所有关联节点的文本。
代码示例：

<span id="role-label" class="sr-only">Participant</span>
<p id="person-name" aria-labelledby="role-label person-name">
  Martin Clark
</p>

该方案同样符合开发规则，业务内容不需要写入aria-label，朗读顺序和效果和方案1一致，但需要额外维护id属性，适合需要显式标记可访问名称关联关系的场景。

• 不要使用aria-describedby实现该需求：该属性关联的内容会被作为元素的补充描述，屏幕阅读器通常会在读完元素主名称后停顿一段时间再读取，无法实现无缝前置拼接的效果。
• 不要使用display: none、visibility: hidden、hidden属性隐藏前置朗读文本：这些属性会将元素从无障碍树中移除，屏幕阅读器无法读取对应内容。
• 不要强行将业务内容写入aria-label实现拼接：不仅违反开发规则，后续业务内容更新时很容易出现aria-label和原生内容不同步的问题，引发无障碍故障。

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