如何让屏幕阅读器将页面中的‘5m’正确播报为‘5分钟’？

可以用「视觉元素隐藏+屏幕阅读器专属文本」的方案，完美兼顾设计师的格式要求和无障碍播报需求：

• 核心思路：让视觉上显示的5m被屏幕阅读器忽略，同时在页面中嵌入只有屏幕阅读器能识别的完整文本5 minutes。

具体实现代码：

<span>Time elapsed: 
  <span aria-hidden="true">5m</span>
  <span class="sr-only">5 minutes</span>
</span>

添加对应的CSS类，确保sr-only元素仅对屏幕阅读器可见，视觉上完全隐藏：

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

还有一个备选方案：使用<abbr>标签标注缩写含义，但该方案需要用户手动触发额外信息播报（比如VoiceOver中需激活缩写的详情提示），不如上述方案直接：

<span>Time elapsed: 5<abbr title="minutes">m</abbr></span>

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