SurveyJS图像选择器组件的无障碍访问问题解析

在SurveyJS表单库的图像选择器组件中，开发团队发现并修复了一个影响屏幕阅读器用户的无障碍访问问题。这个问题涉及到图像选择器选项中的隐藏输入元素的aria-label属性值设置错误。

问题背景

图像选择器是SurveyJS表单库中一种常见的表单元素类型，它允许用户通过点击图像来完成选择。为了确保所有用户都能无障碍使用这一功能，开发团队需要特别注意组件的无障碍访问特性。

技术细节分析

问题的核心在于隐藏输入元素的aria-label属性被错误地设置为问题标题而非选项值。具体表现为：

1. 每个图像选择器选项背后都有一个隐藏的输入元素
2. 该输入元素的aria-label属性本应描述当前选项的值（如"狮子"）
3. 但实际上却被设置为整个问题的标题（如"请选择你最喜欢的动物"）

这种错误会导致屏幕阅读器用户无法准确理解每个选项代表的内容，从而影响他们的使用体验。

影响范围

这一问题影响所有使用图像选择器组件的场景，特别是在以下环境中：

• 所有主流浏览器
• 使用React框架的项目
• SurveyJS v1.12.23及更早版本

解决方案

开发团队通过以下方式修复了这一问题：

1. 重新实现了隐藏输入元素的aria-label属性生成逻辑
2. 确保属性值正确反映选项的实际内容而非问题标题
3. 保持与WAI-ARIA规范的一致性

技术实现要点

修复后的实现确保了：

• 每个选项的隐藏输入都有明确的、描述性的标签
• 屏幕阅读器能够准确读出每个选项的含义
• 保持了与原有功能的兼容性

最佳实践建议

基于这一问题的解决，我们可以总结出一些表单组件开发的无障碍访问最佳实践：

1. 确保所有表单控件的标签准确描述其功能或内容
2. 对于图像选择类控件，除了视觉提示外，必须提供文本替代方案
3. 定期使用无障碍工具测试组件
4. 考虑屏幕阅读器用户的完整交互流程

总结

SurveyJS团队对这一无障碍访问问题的快速响应体现了对包容性设计的重视。通过修复图像选择器组件的aria-label属性，他们确保了所有用户都能平等地使用这一功能。这提醒我们在开发UI组件时，不仅要考虑视觉效果，还要确保无障碍访问特性的正确实现。