优化屏幕阅读器对缩写时间单位的播报

当屏幕阅读器将缩写“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属性中的内容。

Cutout.Pro

AI驱动的视觉设计平台

331

查看详情

定义 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结构时，它会按顺序读取内容：

1. “Time elapsed:”
2. “5”
3. 被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伪元素的技巧，我们可以在满足严格设计要求的同时，显著提升网页内容对屏幕阅读器用户的可访问性，确保信息的准确传达，从而为所有用户提供更优质的体验。

以上就是优化屏幕阅读器对缩写时间单位的播报的详细内容，更多请关注php中文网其它相关文章！