Radix UI主题库中SegmentedControl组件的无障碍优化方案

问题背景

在Radix UI主题库的SegmentedControl组件实现中，每个选项(ToggleGroupPrimitive.Item)内部包含两个span元素，分别用于显示激活状态和非激活状态下的文本内容。这种实现方式虽然视觉上能够正确显示不同状态下的样式，但却带来了无障碍访问方面的问题。

问题现象

当屏幕阅读器访问该组件时，会同时读取两个span中的文本内容，导致用户听到重复的文本信息。例如，对于显示"Draft"的选项，屏幕阅读器会播报"Draft Draft"这样的重复内容，这显然会影响视障用户的使用体验。

技术分析

这种重复播报的问题源于HTML的无障碍树构建机制。屏幕阅读器会遍历DOM结构中的所有可见元素，并将它们的可访问内容组合成无障碍树。当两个相邻的span元素包含相同文本时，屏幕阅读器会依次读取它们的内容。

解决方案

针对这个问题，最直接的解决方案是为非激活状态的span元素添加aria-hidden="true"属性。这个属性会告知辅助技术忽略该元素及其所有子元素，从而避免重复播报。

实现建议

具体实现上，可以在rt-SegmentedControlItemLabelInactive这个span上设置aria-hidden属性。这样设计有几个优势：

1. 保持现有视觉表现不变
2. 仅对辅助技术隐藏冗余信息
3. 不会影响键盘导航等交互行为
4. 实现简单，只需添加一个属性

更深层次的考虑

这种解决方案也符合WAI-ARIA的最佳实践原则。aria-hidden属性专门用于处理这类视觉上有意义但对辅助技术冗余的内容。它比使用display:none或visibility:hidden更合适，因为后两者可能会影响组件的布局和视觉表现。

兼容性说明

aria-hidden属性在现代浏览器和屏幕阅读器组合中都有很好的支持，包括：

• NVDA + Firefox/Chrome
• VoiceOver + Safari
• JAWS + IE/Edge
• TalkBack + Chrome(Android)

总结

在构建可访问的Web组件时，我们不仅要考虑视觉设计，还需要特别关注无障碍体验。通过简单的aria-hidden属性应用，就能显著改善SegmentedControl组件的可访问性，这体现了Radix UI库对包容性设计的重视。这种优化方案也可以推广到其他需要状态切换显示的UI组件中。