关于ChromeVox读取时长格式的无障碍技术咨询

我做无障碍开发时也遇到过类似的屏幕阅读器解析时间缩写的坑，结合实战经验给你几个可行的解决方案和通用规则：

一、直接可行的解决方案 #

1. 用自然语言作为aria-label内容 #

这是最直接且可靠的方法——既然你想要ChromeVox读成“3分钟20秒”，那就直接把aria-label写成这个自然语言文本，完全不用缩写格式：

<div aria-label="3分钟20秒">3m 20s</div>

这样屏幕阅读器不会有任何歧义，直接按照你预期的内容朗读，同时页面视觉显示的缩写格式也不受影响。

2. 用aria-labelledby关联隐藏的辅助文本 #

如果因为业务需求必须保留机器可读的缩写格式，同时需要自定义朗读内容，可以用aria-labelledby关联一个视觉隐藏的元素，里面放标准的自然语言：

<!-- 页面显示的时间 -->
<div aria-labelledby="time-a11y">3m 20s</div>
<!-- 仅屏幕阅读器可见的辅助文本 -->
<span id="time-a11y" class="sr-only">3分钟20秒</span>

对应的通用视觉隐藏样式（无障碍开发常用）：

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

3. 修正缩写格式的可读性 #

如果坚持要用缩写格式，把单位换成完整的中文表述并明确分隔，避免屏幕阅读器误识别：

<!-- 不要写"3m 20s"，换成"3分钟 20秒" -->
<div aria-label="3分钟 20秒">3m 20s</div>

这种方式虽然不如前两种稳妥，但能有效减少“m被读成米”这类歧义。

二、无障碍时间标签的通用规则 #

• 优先自然语言，避免缩写依赖：不同屏幕阅读器（ChromeVox、NVDA、VoiceOver）对缩写、符号的解析逻辑差异很大，不要依赖它们自动识别缩写含义，直接给出明确的朗读文本是最稳妥的。
• 分离视觉显示与朗读内容：当视觉展示的格式（比如紧凑缩写）和无障碍朗读需求冲突时，用aria-labelledby或隐藏文本的方式分离两者，不要强行让屏幕阅读器适配视觉格式。
• 单位表述要清晰无歧义：对于时间、数值类内容，避免使用可能有多重含义的缩写（比如m既可以指分钟也可以指米），尽量用完整单位或无歧义的表述。
• 多阅读器测试：不要只测试ChromeVox，要覆盖主流屏幕阅读器和浏览器组合，确保无障碍体验的一致性。

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