Solid Design System 中下拉选择组件的无障碍优化实践

Solid Design System 中下拉选择组件的无障碍优化实践

solid Monorepo for Union Investment's Solid Design System. 项目地址: https://gitcode.com/gh_mirrors/solid8/solid

背景概述

在现代Web开发中，下拉选择组件(sd-select)是表单交互中最常用的元素之一。Solid Design System项目团队近期针对该组件的无障碍访问(A11y)进行了深度优化，特别是解决了屏幕阅读器用户在使用多选功能时的操作障碍问题。

核心问题分析

传统实现中存在三个主要无障碍缺陷：

1. 标签移除机制混乱：鼠标用户可通过点击内部图标移除选项，而键盘用户只能打开列表。屏幕阅读器用户接收到的"移除选项x"按钮标签与实际功能(打开列表)不符，导致认知偏差。

2. 操作反馈缺失：当用户移除标签时，系统未提供任何屏幕阅读器可感知的确认反馈。

3. 移动端兼容性问题：Android Talkback无法正确识别listbox/combobox角色，且readonly属性会被误读为"禁用"状态。

创新解决方案

分离式交互设计

采用Morningstar设计系统的方案，将移除功能与列表展开功能物理分离：

• 在标签上方单独放置移除图标按钮
• Enter和Space键可触发移除操作
• 保持原有按钮仅用于展开列表

实时反馈机制

引入ARIA实时区域(live region)，当选项被移除时动态播报："已移除选项x"，确保屏幕阅读器用户获得操作确认。

渐进增强策略

针对移动端特殊环境提出双轨方案：

1. 首选方案：通过特性检测自动切换为原生select元素
2. 备选方案：等待浏览器对自定义select规范的支持成熟

技术实现要点

结构化禁忌

• 严格禁止在下拉选项中包含标题或其他交互元素(链接/按钮/复选框)
• 分组标签需考虑部分辅助设备的识别限制

禁用状态处理

采用创新的"视觉禁用"方案替代传统disabled属性，既保持元素可聚焦性，又明确传达不可用状态。

最佳实践总结

1. 多选场景：必须明确告知用户多选能力，并提供已选项查看功能
2. 跨设备测试：需在VoiceOver、NVDA、JAWS等主流屏幕阅读器中验证交互一致性
3. 虚拟光标：确保在浏览模式和焦点模式下的操作预期一致
4. 移动优先：特别关注Android Talkback的识别兼容性

这项优化工作体现了Solid Design System对包容性设计的承诺，通过细致的交互解耦和多重反馈机制，使复杂组件对所有用户都具有一致的可操作性和可理解性。

solid Monorepo for Union Investment's Solid Design System. 项目地址: https://gitcode.com/gh_mirrors/solid8/solid