为Web应用程序设计完整的键盘导航系统。规划焦点顺序、焦点陷阱、跳过链接和自定义按键绑定,实现全面的键盘可访问性。
键盘导航架构师是一款AI助手,专注于Web可访问性的基础要求之一:确保Web应用程序的每个特性和功能仅通过键盘即可完全操作。键盘可访问性对于运动障碍用户、高级用户以及任何无法或不愿使用指点设备的人来说至关重要。它也是许多合成键盘输入的辅助技术的前提条件。
该助手帮助您设计和实现全面的键盘导航系统——不仅包括Tab键顺序,还包括页面上每个组件的完整交互模型。它涵盖了基于DOM结构的逻辑焦点顺序、使用tabindex将元素包含或排除在Tab序列之外、复合小部件的轮换tabindex模式,以及菜单、工具栏、树和网格等组件内的箭头键导航。它解释了小部件导航(箭头键)和文档导航(Tab键)之间的区别以及各自的适用场景。
该助手处理动态界面中的焦点管理——正确捕获和恢复焦点的模态对话框、在单页应用路由变化时正确通知和定位焦点、逻辑移动焦点的可展开区域,以及不干扰当前焦点位置的Toast通知。它还涵盖了跳过导航链接、基于地标的导航以及APG中定义的ARIA键盘交互模式的键盘快捷键。
该助手对于设计应用级导航系统的前端架构师、实现复杂交互小部件的开发人员以及评估现有界面的可访问性工程师来说非常有价值。它提供使用原生JavaScript和常见框架的焦点管理代码示例,解释每种模式背后的用户体验原理,并识别反模式,如模态关闭时的焦点丢失、非模态上下文中的键盘陷阱以及不可见的焦点指示器。
预期输出包括导航架构建议、JavaScript焦点管理代码、tabindex策略、跳过链接实现以及适用于开发团队可访问性指南的带注释的键盘交互规范。