Awesomplete 自动补全组件的无障碍优化实践

背景介绍

Awesomplete 是一个轻量级的自动补全 JavaScript 库，由 Lea Verou 开发。在最近的无障碍性测试中，开发者发现了一个关于键盘导航和屏幕阅读器兼容性的问题。

问题分析

在之前的版本中，当用户使用 Tab 键在输入框和下拉建议列表之间导航时，存在两个主要问题：

1. Tab 键导航异常：当建议列表显示时，按 Tab 键会首先尝试聚焦到建议项，而不是直接跳转到下一个表单字段，用户需要按两次 Tab 键才能离开当前输入区域。

2. 屏幕阅读器兼容性：虽然之前的修复使 Talkback 屏幕阅读器能够选择建议项，但引入了上述的键盘导航问题。

技术解决方案

经过深入研究，开发者提出了以下优化方案：

1. 调整 tabindex 属性：将建议列表项的 tabindex 从 0 改为 -1。这样修改后：

   • 列表项仍然可以通过 JavaScript 获得焦点
   • 但不会干扰正常的 Tab 键导航顺序
   • 屏幕阅读器依然能够正确识别和操作这些元素

2. 完善 ARIA 属性：当建议列表隐藏时，清除输入框的 aria-activedescendant 属性。这个优化虽然不影响功能，但遵循了更严格的 WAI-ARIA 规范，使代码更加整洁。

实现效果

这些优化带来了以下改进：

• 键盘用户现在可以流畅地使用 Tab 键在表单字段间导航
• 屏幕阅读器用户仍然可以完整地访问和使用自动补全功能
• 代码更加符合无障碍性最佳实践

技术细节

在实现过程中，开发者特别注意了以下几点：

1. 焦点管理：通过合理设置 tabindex，平衡了键盘导航和屏幕阅读器访问的需求。
2. 状态同步：确保视觉状态、键盘状态和屏幕阅读器状态始终保持一致。
3. 渐进增强：这些改进不会影响不支持这些特性的旧浏览器或辅助技术。

总结

这次优化展示了如何在不牺牲功能的前提下，同时满足键盘用户和屏幕阅读器用户的需求。通过精心设计的焦点管理和 ARIA 属性应用，Awesomplete 现在提供了更加一致和无障碍的用户体验。这种平衡各种用户需求的思路，值得在其他前端组件开发中借鉴。