如何让MacOS Voiceover正确读取含内联span的美元金额？

问题场景 #

现有如下HTML结构：

<div>
  $<span class="enlarged-text">245</span>.50
</div>

在MacOS Monterey 12.7.1的Safari环境中：

• 使用VoiceOver的CAPSLOCK + Right（朗读下一个元素）功能，能正确识别并朗读为「two hundred and forty five dollars and fifty cents」
• 但触发自动朗读（CAPSLOCK + A）时，会错误朗读为「two dollars, forty five point five zero」

已尝试的无效/部分有效方案 #

1. 给外层div添加role="text"：

<div role="text">
  $<span class="enlarged-text">245</span>.50
</div>

效果：自动朗读变为「two hundred and forty five dollars, fifty」，但逐元素朗读时变成「two hundred and forty five dollars point five zero」，仍不符合预期。

2. 将金额各部分拆分包裹span：

<div role="text">
  <span>$</span><span class="enlarged-text">245</span><span>.50</span>
</div>

此方案无任何改善。

可行解决方案 #

通过aria-label直接为外层元素指定完整的金额文本，强制VoiceOver以正确的金额格式朗读，同时保留原有的视觉样式：

<div aria-label="$245.50">
  $<span class="enlarged-text">245</span>.50
</div>

原理：aria-label会覆盖屏幕阅读器对元素内容的默认解析，直接提供明确的朗读内容，无论使用自动朗读还是逐元素朗读，VoiceOver都会将其识别为一个完整的金额，正确朗读为「two hundred and forty five dollars and fifty cents」。

另外，也可以结合隐藏的语义化文本实现相同效果（适合需要动态生成金额的场景）：

<div aria-labelledby="full-amount">
  <!-- 仅用于屏幕阅读器的完整金额文本 -->
  <span id="full-amount" style="position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;">$245.50</span>
  <!-- 视觉展示的拆分结构 -->
  $<span class="enlarged-text">245</span>.50
</div>

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