Carbon Design System中FilterableMultiSelect组件的无障碍文本问题解析

Carbon Design System作为IBM开源的优秀设计系统，在构建企业级应用界面时提供了丰富的组件支持。最近在使用其FilterableMultiSelect组件时，发现了一个值得关注的无障碍访问问题，本文将深入分析该问题的成因、影响及解决方案。

问题现象

当用户使用JAWS或VoiceOver等屏幕阅读器操作FilterableMultiSelect组件时，在未选择任何选项的情况下，屏幕阅读器会播报"Total items selected: : 0"的提示信息。这里出现了明显的标点符号重复问题——冒号被重复了一次。

通过检查DOM结构，可以发现问题源于以下HTML片段：

<span class="cds--visually-hidden">
  <span class="cds--visually-hidden">Total items selected: : 0</span>
</span>

技术分析

这个问题看似简单，但实际上反映了组件在无障碍设计上的几个关键考量点：

1. 视觉隐藏文本的重要性：Carbon使用了cds--visually-hidden类来为屏幕阅读器提供额外的上下文信息，这对视障用户理解组件状态至关重要。

2. 国际化字符串拼接：在组件内部实现中，提示文本很可能是通过字符串拼接生成的，当没有选中项时，拼接逻辑可能出现了重复分隔符的情况。

3. 嵌套视觉隐藏元素：DOM结构中出现了嵌套的视觉隐藏元素，这种结构虽然不会影响视觉呈现，但可能影响屏幕阅读器的解析。

影响评估

虽然这个问题被标记为严重性3级（用户仍能完成任务，且有变通方案），但对于依赖屏幕阅读器的用户来说，重复的标点符号会导致：

1. 听觉干扰：多余的冒号会增加认知负荷
2. 专业感降低：细节问题会影响用户对产品专业性的感知
3. 一致性缺失：与选中状态下的播报格式不一致

解决方案

修复这类问题的典型方法包括：

1. 字符串模板规范化：使用模板字符串或国际化函数来确保格式一致性
2. 条件渲染优化：根据选中状态动态生成完整的提示文本，而非拼接
3. 单元测试覆盖：为屏幕阅读器文本添加自动化测试用例

最佳实践建议

在开发类似的可过滤多选组件时，建议：

1. 统一使用国际化框架管理所有面向用户的文本
2. 为所有动态生成的提示文本建立严格的格式校验
3. 定期使用不同屏幕阅读器进行无障碍测试
4. 避免不必要的DOM嵌套，特别是对视觉隐藏内容

总结

Carbon Design System作为企业级设计系统，对无障碍的支持一直处于行业领先水平。这个冒号重复的小问题提醒我们，在组件开发中，即使是看似简单的文本提示也需要精心设计。通过规范字符串处理逻辑和加强测试覆盖，可以确保所有用户都能获得一致、清晰的无障碍体验。