SuperAPI AI 工具集

keyboard-navigation

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为依赖键盘操作的用户设计可访问界面,规范焦点管理与键盘快捷键行为。

主要能力与要点: 焦点顺序:遵循视觉阅读顺序(从左到右语言下为左上到右下);顶部提供“Skip to main content”跳过链接;Tab 向前、Shift+Tab 向后;不制造键盘陷阱(用户始终可 Tab 离开,模态框除外);模态框或对话框关闭后焦点返回触发元素。

焦点指示:使用 :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } 要求始终可见,不得在无替代方案时使用 outline: none;需与背景保持高对比;所有元素样式一致。

组件键盘模式:按钮用 Enter/Space 激活;链接用 Enter 跳转;标签页面板用方向键在标签间切换、Tab 进入内容;菜单用方向键导航、Enter 选择、Escape 关闭;模态框用 Escape 关闭、Tab 在其中循环;组合框用方向键、Enter 选择、Escape 关闭;滑块用方向键调整数值。

限制:资料未提供具体框架实现、快捷键自定义方式、测试工具与浏览器兼容范围等信息。