SpareBank1设计系统中ToggleSwitch组件的无障碍设计考量

SpareBank1设计系统中ToggleSwitch组件的无障碍设计考量

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem

在SpareBank1设计系统的开发过程中，ToggleSwitch组件的无障碍访问性成为了一个重要议题。这个开关组件目前面临着视觉文本与屏幕阅读器播报不一致的问题，需要从技术层面进行深入分析和解决方案设计。

当前实现的问题分析

ToggleSwitch组件目前通过onText和offText属性允许开发者自定义开关状态的显示文本，但这一设计在实际使用中产生了无障碍访问的兼容性问题。核心矛盾点在于：

1. 组件内部使用了role="switch"的ARIA属性，这会导致屏幕阅读器自动播报"Av"(关)和"På"(开)状态
2. 视觉展示的文本被标记为aria-hidden="true"，屏幕阅读器会忽略这些自定义文本
3. 当开发者设置自定义文本(如"启用"/"禁用")时，屏幕阅读器仍然播报默认的"Av"/"På"，造成视觉与听觉信息不一致

技术解决方案探讨

方案一：保持文本对屏幕阅读器可见

理论上可以让自定义文本对屏幕阅读器可见，但这会带来新的问题：

• 屏幕阅读器会同时播报ARIA角色自带的"Av/På"和自定义文本，造成重复信息
• 需要复杂的ARIA属性配置来协调两者的关系，增加实现复杂度
• 与W3C的ARIA实践指南不一致，他们同样选择隐藏视觉文本

方案二：限制自定义文本功能

更合理的方案可能是完全移除onText和offText属性，强制使用标准化的"Av/På"文本。这种做法的优势包括：

• 确保视觉展示与屏幕阅读器播报完全一致
• 简化组件API，减少误用可能性
• 遵循W3C ARIA设计模式的最佳实践
• 保持界面元素的一致性，提升用户体验

深入技术考量

从技术实现角度看，ToggleSwitch作为表单控件，其无障碍设计需要特别关注：

1. ARIA角色选择：role="switch"是专门为二元状态切换设计的，比普通复选框更语义化
2. 状态管理：需要正确设置aria-checked属性来反映当前状态
3. 标签关联：必须确保开关有适当的标签关联，可以通过<label>或aria-labelledby
4. 键盘操作：需要支持空格键和回车键切换状态

对开发者的影响评估

移除自定义文本功能可能会影响现有的一些使用场景，但考虑到：

• 大多数情况下，"Av/På"已经足够表达开关语义
• 如果需要更复杂的标签说明，应该考虑使用外部标签文本
• 保持一致性比局部自定义更重要，特别是对于银行类应用的严肃性

结论与建议

综合技术实现、无障碍规范和用户体验等多方面因素，建议SpareBank1设计系统采用方案二，即移除ToggleSwitch组件的onText和offText属性，强制使用标准化的"Av/På"文本。这种方案虽然限制了部分自定义能力，但确保了：

1. 更好的无障碍访问支持
2. 更一致的界面行为
3. 更简单的API设计
4. 符合行业最佳实践

对于确实需要展示不同文本的特殊场景，建议通过组合其他文本组件的方式实现，而不是修改ToggleSwitch本身的核心功能。

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem