GitHub 无障碍团队解决创建无障碍拖放列表的挑战
realtime news Jul 10, 2024 06:55
GitHub 无障碍团队解决了使拖放排序列表无障碍的复杂性，重点介绍了主要挑战和创新解决方案。
拖放功能在现代网页界面中是一个常见功能，用于上传文件、重新排列书签和组织内容。然而，使这一功能对包括残障用户在内的所有用户都变得无障碍，面临着重大挑战。根据The GitHub Blog，GitHub 无障碍团队一直在努力解决这些问题。
挑战：屏幕阅读器导航
屏幕阅读器通常使用箭头键进行导航，这与同样依赖这些键的拖放功能冲突。为了解决这个问题，团队实现了 role='application' 属性来覆盖默认的屏幕阅读器行为。此更改允许使用箭头键进行拖放操作，但需要仔细实现以避免对整体无障碍性产生负面影响。
挑战：NVDA 屏幕阅读器兼容性
另一个难题是确保与 NVDA 兼容，NVDA 是一种流行的屏幕阅读器，当用户按下 Enter 或 Space 键时会模拟鼠标事件。这种模拟与预期的鼠标和键盘互动行为不同，导致拖放功能产生冲突。团队通过将键盘和鼠标功能分离到不同的 HTML 元素中来解决这一问题，从而确保所有用户的顺畅操作。
挑战：实时移动项目公告
实时公告项目移动特别困难，特别是在用户快速移动项目时。团队在公告中加入了 100 毫秒的防抖处理，使用 aria-live='assertive' 属性确保及时更新。该方法最大限度地减少了延迟，并让用户及时了解信息，同时避免了过时信息的泛滥。
挑战：首次用户体验
由于许多应用程序中拖放功能缺乏无障碍性，许多残障用户对其不熟悉。为简化学习曲线，GitHub 添加了一个指导对话框，当用户通过键盘激活拖放时会出现。这个对话框可由不再需要指导的用户禁用，平衡了无障碍性和用户便利性。
挑战：语音控制辅助技术
语音控制带来了独特的挑战，特别是在处理可滚动列表时。团队引入了一个移动对话框，作为传统拖放的替代方案。此对话框允许用户指定移动项目的操作和位置，并通过 aria-live 宣布预览。此功能不仅有助于语音控制用户，也有助于那些更喜欢受控互动的用户。
总之，创建无障碍的拖放界面需要克服众多技术和用户体验上的挑战。GitHub 无障碍团队的创新解决方案强调了用户反馈和迭代测试在开发包容性网页功能中的重要性。
Image source: Shutterstock