当屏幕阅读器将缩写“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 结构调整
我们将数字部分和单位部分分开，并引入一个用于视觉隐藏的<span>元素来承载屏幕阅读器所需的长格式单位。
<p>Time elapsed: <span data-units="m">5</span> <span class="visually-hidden">minutes</span></p>
在这个结构中：
- <span data-units="m">5</span>：data-units属性用于存储视觉上要显示的单位缩写“m”。数字“5”是直接可见的。
- <span class="visually-hidden">minutes</span>：这个<span>包含了屏幕阅读器应该播报的完整单位“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属性的值。这样，<span>5</span>之后就会视觉上显示“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伪元素的技巧，我们可以在满足严格设计要求的同时，显著提升网页内容对屏幕阅读器用户的可访问性，确保信息的准确传达，从而为所有用户提供更优质的体验。
