当屏幕阅读器将缩写“5m”误读为“5米”时，本文提供了一种无障碍解决方案。通过结合使用`visually-hidden` css类和css伪元素，可以在保持视觉设计不变的前提下，确保屏幕阅读器正确播报为“5分钟”，从而提升用户体验和内容可访问性。
在网页开发中，我们经常需要展示时间信息，例如“5m”表示“5分钟”。然而，对于依赖屏幕阅读器（如Apple VoiceOver）的用户而言，这种缩写可能会带来无障碍性问题。屏幕阅读器可能会将“5m”错误地解读为“5 meters”（5米），而非预期的“5 minutes”（5分钟），这严重影响了信息的准确传达。
尽管将内容直接写为“5 min”或“5 minutes”是最佳实践，但有时受限于设计规范，我们必须保持“5m”这种紧凑的视觉格式。在这种情况下，传统的aria-label属性并不适用，因为它通常用于交互式元素或需要额外上下文的场景，而非简单的文本内容。
解决方案：视觉隐藏与伪元素结合
为了在不改变视觉呈现的前提下，确保屏幕阅读器正确播报，我们可以采用一种结合了CSS visually-hidden技术和伪元素的方法。其核心思想是将视觉上显示的“m”与屏幕阅读器实际读取的“minutes”分离开来。
1. HTML 结构调整
我们将数字部分和单位部分分开，并引入一个用于视觉隐藏的元素来承载屏幕阅读器所需的长格式单位。
<p>Time elapsed: <span data-units="m">5</span> <span class="visually-hidden">minutes</span></p>
在这个结构中：
- 5：data-units属性用于存储视觉上要显示的单位缩写“m”。数字“5”是直接可见的。
- minutes：这个包含了屏幕阅读器应该播报的完整单位“minutes”。它将通过CSS完全隐藏起来，对视觉用户不可见。
2. CSS 样式定义
为了实现上述效果，我们需要定义visually-hidden类以及利用伪元素来显示data-units属性中的内容。
定义 visually-hidden 类： 这个CSS类用于将内容从视觉上隐藏，但依然保持其在无障碍树（accessibility tree）中，从而能被屏幕阅读器识别并播报。
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}解释：
- clip: rect(0 0 0 0); 和 clip-path: inset(50%);：将元素裁剪到无法看到的极小区域。
- height: 1px; width: 1px;：将元素尺寸缩小到最小。
- overflow: hidden;：隐藏任何溢出内容。
- position: absolute;：将元素从文档流中移除，防止其影响布局。
- white-space: nowrap;：防止文本换行，确保即使在极小空间内也能保持单行。
使用伪元素显示视觉单位： 通过::after伪元素，我们可以在数字“5”之后动态插入data-units属性中存储的“m”。
[data-units]::after {
content: attr(data-units);
}解释：
- [data-units]::after：选择所有带有data-units属性的元素，并在其内容之后插入一个伪元素。
- content: attr(data-units);：将伪元素的内容设置为data-units属性的值。这样，5之后就会视觉上显示“m”。
工作原理
当屏幕阅读器遇到上述HTML结构时，它会按顺序读取内容：
- “Time elapsed:”
- “5”
- 被visually-hidden类隐藏的“minutes”
因此，屏幕阅读器将播报“Time elapsed: 5 minutes”，而不是“Time elapsed: 5 meters”，完美解决了误读问题。同时，视觉用户仍然看到的是“Time elapsed: 5m”，保持了原有的设计要求。
注意事项与总结
- 适用场景： 这种方法特别适用于需要视觉简洁但语义完整的情况，尤其是在缩写可能导致歧义时。
- 语义优先： 始终优先考虑直接提供语义清晰的文本内容。如果设计允许，直接使用“5 min”或“5 minutes”是更简单、更直接的无障碍方案。
- CSS 依赖： 此方案依赖于CSS。如果CSS未加载，视觉用户可能会看到“5 minutes”，而屏幕阅读器仍能正常工作。
- 可维护性： 将单位存储在data-units属性中，使得单位的修改更加方便，无需更改HTML结构。
通过这种结合visually-hidden和CSS伪元素的技巧，我们可以在满足严格设计要求的同时，显著提升网页内容对屏幕阅读器用户的可访问性，确保信息的准确传达，从而为所有用户提供更优质的体验。
