如何避免NVDA屏幕阅读器在读取电话号码过程中播报多余的‘link’提示？

问题成因 #

这个问题的核心是NVDA屏幕阅读器在处理带有空格分隔数字的aria-label与tel:协议链接的组合时，出现了解析逻辑冲突：

• 当aria-label中包含空格拆分的长数字序列时，NVDA的语音解析引擎会错误地将数字序列的后半段识别为一个新的tel链接元素，从而重复播报“link”提示词。
• 加上tel:链接本身会被NVDA标记为可交互的链接元素，双重识别导致了异常的重复播报。

可行修复方案 #

以下是几种经过验证的修复方式，按推荐程度排序：

1. 简化aria-label，使用标准号码格式

去掉aria-label中数字的空格分隔，直接使用和链接文本一致的带连字符的号码格式，让NVDA能统一解析内容：

<a aria-label="Call 1-800-555-1212 for further questions" href="tel:18005551212">1-800-555-1212</a>

这样NVDA会完整读取整个aria-label内容，不会误拆分数字序列。

2. 移除冗余的aria-label

如果链接文本已经是清晰易读的电话号码（比如示例中的1-800-555-1212），其实不需要额外添加aria-label——NVDA会自动识别tel:协议，并正确读取链接文本的号码内容，同时提示这是一个可拨打的电话链接。简化后的代码：

<a href="tel:18005551212">1-800-555-1212</a>

3. 使用aria-labelledby替代aria-label

将标签文本放在一个视觉隐藏但屏幕阅读器可见的元素中，通过aria-labelledby关联，避免NVDA对aria-label内数字的误解析：

<!-- 视觉隐藏类，仅屏幕阅读器可见 -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

<span id="call-description" class="sr-only">Call 1-800-555-1212 for further questions</span>
<a href="tel:18005551212" aria-labelledby="call-description">1-800-555-1212</a>

4. 调整aria-label的语序

把描述性文本放在号码前面，改变NVDA解析内容的顺序，减少误判概率：

<a aria-label="For further questions, call 1-800-555-1212" href="tel:18005551212">1-800-555-1212</a>

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