Carbon Design System 中 Dropdown 组件 JAWS 屏幕阅读器兼容性问题解析

在 Windows 平台下使用 Carbon Design System 的 React 版本 Dropdown 组件时，发现了一个与 JAWS 屏幕阅读器的兼容性问题。当用户通过键盘导航在 Dropdown 菜单项间移动焦点时，JAWS 无法正确朗读当前聚焦的菜单项内容，这给视障用户带来了操作障碍。

问题现象

具体表现为：

1. 用户使用 Tab 键聚焦到 Dropdown 控件
2. 按空格键展开下拉菜单
3. 使用上下方向键在菜单项间导航时
4. JAWS 屏幕阅读器无法播报当前聚焦的菜单项文本

这个问题会导致视障用户无法感知当前选择的菜单项，必须实际选中某个选项并关闭菜单后才能知道选择的内容，严重影响了无障碍操作的流畅性。

技术背景

Dropdown 组件是 Web 应用中常见的重要交互控件，其无障碍支持尤为关键。根据 WAI-ARIA 规范，这类可展开的菜单控件应该：

• 明确标识当前聚焦状态
• 实时播报焦点变化
• 提供清晰的角色和状态信息

JAWS 作为主流屏幕阅读器之一，对 ARIA 属性的解析有其特定实现方式。当组件未完全遵循最佳实践时，就可能出现类似这种焦点变化未被正确识别的情况。

解决方案

开发团队通过以下方式解决了该问题：

1. 确保每个菜单项都有正确的 role="option" 属性
2. 动态更新 aria-activedescendant 属性以反映当前焦点项
3. 优化焦点管理逻辑，确保焦点变化时触发适当的 ARIA 事件
4. 添加必要的 aria-live 区域以增强屏幕阅读器反馈

这些改进已包含在 @carbon/react 1.81.0 及更高版本中。升级后，JAWS 现在能够正确识别并朗读 Dropdown 组件中的焦点变化，为用户提供了完整的操作反馈。

最佳实践建议

基于此案例，开发类似交互组件时应注意：

1. 始终进行跨屏幕阅读器测试（JAWS、NVDA、VoiceOver等）
2. 使用 ARIA 属性明确标识组件角色和状态
3. 确保键盘导航时焦点变化能被辅助技术感知
4. 考虑添加辅助性的 aria-live 提示以增强用户体验

这个案例展示了即使是成熟的设计系统，也需要持续关注无障碍兼容性问题，特别是与特定辅助技术的交互细节。通过遵循 WAI-ARIA 规范并进行充分测试，可以确保所有用户都能获得一致的操作体验。