如何让屏幕阅读器正确读取文本元素中的货币值？

我太懂你的困扰了——屏幕阅读器把货币数字拆成“two point five zero zero”这种奇怪的读法，完全没体现出货币的语义，视障用户听了肯定一头雾水。你提到的aria-labelledby搭配隐藏元素的思路其实非常靠谱，这也是无障碍开发里的标准操作，另外还有几个实用的方案，我给你详细捋捋：

方案一：视觉隐藏的辅助文本（最通用、最可靠） #

这个方法的核心是给屏幕阅读器单独提供语义化的货币读法，同时让视觉用户看不到额外内容，完美兼顾两种用户的体验。

首先你需要一个视觉隐藏的CSS类，注意千万别用display: none（那样屏幕阅读器也会忽略这个元素），正确的样式应该是这样的：

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

然后分场景实现：

• 对于<select>的<option>元素：
  直接在option里嵌入隐藏的辅助文本，视觉上只显示货币符号+数字，屏幕阅读器会自动读出完整的货币含义：

  <select name="money" id="money-select">
    <option value="first">€ 2.500 <span class="visually-hidden">两千五百欧元</span></option>
    <option value="second">€ 3.000 <span class="visually-hidden">三千欧元</span></option>
  </select>
  

• 对于<p>这类非交互文本元素：
  你有两种选择，第一种是把辅助文本直接嵌套在目标元素内，写法更简洁：

  <p>€ 2.500 <span class="visually-hidden">两千五百欧元</span></p>
  

  第二种就是你考虑的aria-labelledby方案，适合辅助文本和目标元素需要分离的场景，完全符合W3C无障碍规范，绝对是正规实现：

  <p id="money-amount" aria-labelledby="money-amount-label">€ 2.500</p>
  <span id="money-amount-label" class="visually-hidden">两千五百欧元</span>
  

方案二：利用语言属性优化自动解析（辅助选项） #

如果你的货币格式和页面语言强相关（比如德语里用.作为千分位，英语用,），可以给元素添加lang属性，让屏幕阅读器根据语言规则自动解析数字：

<p lang="de">€ 2.500</p>

不过这个方案依赖屏幕阅读器的语言支持程度，稳定性不如手动添加辅助文本，建议作为补充手段使用。

避坑提醒 #

• 别用aria-label给非交互元素加读法：虽然部分现代屏幕阅读器支持，但旧版本兼容性很差，风险较高。
• 别依赖title属性：它只有鼠标悬停时才显示，大部分屏幕阅读器不会主动读取title内容，完全靠它会导致视障用户错过关键信息。

内容来源于stack exchange