本文探讨了如何在保持紧凑视觉设计“5m”的同时，确保屏幕阅读器能正确播报为“5分钟”的无障碍实现方案。通过结合使用CSS的`visually-hidden`类和伪元素，我们能够为屏幕阅读器提供完整的语义信息，同时满足设计师对视觉呈现的严格要求，避免了`aria-label`在非交互元素上的局限性，提供了一种灵活且语义友好的解决方案。
在网页开发中，我们经常需要展示时间、距离等带有单位的信息，例如“5m”表示“5分钟”。然而，当屏幕阅读器（如Apple VoiceOver）遇到“5m”这样的缩写时，可能会将其误读为“5 meters”（5米），而非预期的“5 minutes”（5分钟），这会严重影响用户体验和内容的可访问性。虽然直接在HTML中写“5 min”是最佳实践，但在设计严格要求保持“5m”这种紧凑格式的情况下，我们需要寻找一种既能满足视觉设计又能兼顾屏幕阅读器正确播报的方法。传统的aria-label属性通常用于为交互式元素提供额外的可访问性名称，对于非交互式文本内容并不适用。
解决方案：结合visually-hidden和CSS伪元素
为了解决这一问题，我们可以采用一种巧妙的组合技术：利用CSS的visually-hidden（视觉隐藏）类来为屏幕阅读器提供完整的文本信息，同时使用CSS伪元素（::after）来在视觉上呈现设计师要求的紧凑缩写。
核心思路
- 语义完整性： 在HTML中，为屏幕阅读器提供完整的、未缩写的单位文本（例如“minutes”）。
- 视觉呈现： 使用CSS将完整的单位文本在视觉上隐藏，同时通过伪元素在数字后追加缩写（例如“m”）。
这样，屏幕阅读器会读取完整的“5 minutes”，而普通用户在视觉上只会看到“5m”。
示例代码
以下是实现此方案所需的HTML和CSS代码：
HTML结构：
<p>Time elapsed: <span data-units="m">5</span> <span class="visually-hidden">minutes</span></p>
在这个HTML结构中：
- <span data-units="m">5</span>：这个<span>包含了数字“5”，并利用data-units="m"属性来存储我们希望在视觉上显示的单位缩写“m”。
- <span class="visually-hidden">minutes</span>：这个<span>包含了完整的单位名称“minutes”，它将被CSS隐藏起来，但屏幕阅读器可以访问到。
CSS样式：
/* 用于在数字后追加单位缩写 */
[data-units]::after {
content: attr(data-units); /* 从data-units属性获取内容 */
}
/* 视觉隐藏类，使内容对屏幕阅读器可见但对视觉用户不可见 */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}CSS代码解释：
- [data-units]::after：这个选择器针对所有带有data-units属性的元素。::after伪元素会在该元素的内容之后生成一个虚拟内容。content: attr(data-units);则会动态地从data-units属性中获取值（在这里是“m”）并作为伪元素的内容显示出来。
- .visually-hidden：这个类是实现内容视觉隐藏的关键。它采用了一系列CSS属性来确保内容在视觉上不可见，但仍存在于DOM中，从而可以被屏幕阅读器识别和朗读。
- clip: rect(0 0 0 0); 和 clip-path: inset(50%);：将元素裁剪到不可见的区域。
- height: 1px; width: 1px;：将元素的尺寸缩小到最小，使其几乎不占据空间。
- overflow: hidden;：隐藏任何超出1x1像素框的内容。
- position: absolute;：将元素从文档流中移除，防止其影响其他元素的布局。
- white-space: nowrap;：防止文本换行，确保即使文本很长也能被裁剪到最小尺寸。
注意事项与最佳实践
- 测试重要性： 实施此方案后，务必使用真实的屏幕阅读器（如VoiceOver、NVDA、JAWS等）进行测试，以确保其按预期工作，不同屏幕阅读器可能存在细微差异。
- 语义优先： 尽管此方法解决了特定设计限制，但如果设计允许，直接在HTML中提供完整且语义明确的文本（例如“5 min”或“5 minutes”）仍然是最佳的无障碍实践。
- 避免滥用： visually-hidden类应谨慎使用，仅在确实需要为屏幕阅读器提供额外信息，而视觉设计又无法直接呈现时才采用。过度使用可能导致代码复杂性增加，或在某些特殊情况下产生意想不到的无障碍问题。
- CSS类名： visually-hidden是一个常见的无障碍辅助类名，许多CSS框架（如Bootstrap）都提供了类似的功能。保持一致性有助于团队协作和代码维护。
总结
通过巧妙地结合使用visually-hidden类和CSS伪元素，我们成功地在满足设计师对紧凑视觉呈现“5m”要求的同时，确保了屏幕阅读器能够正确地播报为“5 minutes”。这种方法提供了一个灵活且强大的工具，用于解决在严格设计约束下，提升网页无障碍性的挑战，确保所有用户都能平等地获取信息。
