如何引导屏幕阅读器正确发音词汇？以Mac VoiceOver场景为例

下面是几种针对Mac平台VoiceOver的可行方案，能强制让"LIVE"按与"alive"押韵的/lʌɪv/发音：

1. 使用HTML <phoneme>标签（推荐） #

这是W3C语音合成规范中专门用于指定发音的标签，VoiceOver原生支持。直接给目标文本指定音标即可：

<phoneme ph="/lʌɪv/">LIVE</phoneme> - Newsworthy Event Occurs

该方法精准控制发音，完全不影响页面视觉显示。

2. 使用aria-label替换朗读内容 #

如果担心<phoneme>的兼容性（大部分现代屏幕阅读器都支持，但旧版本可能例外），可以用aria-label明确指定屏幕阅读器的朗读内容：

<span aria-label="live, rhyming with alive">LIVE</span> - Newsworthy Event Occurs

视觉上显示的仍是"LIVE"，但VoiceOver会读取aria-label中的提示内容，从而触发正确发音。

3. 视觉隐藏辅助文本方案 #

如果以上方法都不适用，可通过视觉隐藏技巧让屏幕阅读器读取指定内容，同时保持页面视觉显示不变：

<!-- 供屏幕阅读器读取的辅助文本 -->
<span class="visually-hidden">live (rhyming with alive)</span>
<!-- 视觉显示的文本，标记为屏幕阅读器忽略 -->
<span aria-hidden="true">LIVE</span> - Newsworthy Event Occurs

配套视觉隐藏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，提问作者Rhys Mills