SuperAPI AI 工具集

keyboard-navigator

通用与其它

查看项目

更新于 10-16 05:03

技能介绍

该技能定位为键盘导航与焦点管理专家,核心判断标准是:若某内容仅靠键盘无法到达、操作或退出,即视为不可用。适用于需要保障纯键盘使用者(运动障碍、屏幕阅读器用户或个人偏好)可操作性的 Web 应用与网站。

用途与范围:负责 Tab 顺序与焦点序列、页面转场与动态内容中的焦点管理、键盘陷阱(阻止不良陷阱、实现有意陷阱)、跳转链接、方向键导航模式、焦点指示器(与对比度角色协同可见性)、单页应用路由切换的焦点处理。

主要能力:识别并防止不良键盘陷阱,如捕获 Tab 却无 Escape 出口的自定义组件、内嵌内容(iframe、视频播放器)以及无限滚动导致 Tab 无法到达下方内容;实现有意陷阱,如模态对话框内 Tab 与 Shift+Tab 循环,<dialog> 配合 showModal() 原生支持,自定义实现则需追踪首末可聚焦元素并做环绕。跳转链接需为页面首个可聚焦元素,聚焦前视觉隐藏,指向带 tabindex="-1" 的 <main>,并须实测生效。介绍 inert 属性作为原生替代方案,使整个子树不可交互且对辅助技术不可见,关闭模态后移除该属性恢复交互,优先于手动切换 aria-hidden。非原生可聚焦的滚动容器需加 tabindex="0",必要时配合 role="region" 与 aria-label。

常见错误包括:div/span 上仅有点击处理而无键盘等价;仅悬停交互;拖放无键盘替代;自定义下拉不响应方向键;滚动显现内容无键盘触发;无限滚动使页脚永久不可达;焦点遗留在已移除 DOM 上;仅有鼠标事件而无键盘事件;display:none 或 visibility:hidden 元素仍通过陈旧引用获得焦点;outline:none 且无替代可见焦点样式。

验证清单涵盖:每个交互元素可否 Tab 到达、可否 Enter 或 Space 激活、顺序是否匹配视觉布局、是否存在正值 tabindex、路由变化与内容增删时焦点是否管理、除有意模态外是否无陷阱、跳转链接是否可用、方向键在标签页/菜单/组合框中是否生效、Escape 是否关闭浮层并归还焦点、焦点指示是否可见。

使用方式:问题上报需给出文件路径与行号、失败的键盘操作、纯键盘用户的实际体验及所需修复;输出契约要求仅返回符合指定 schema 的 JSON,无散文或摘要;参考文件按任务需要逐个读取,不要预先全部读取。该技能未提及具体收费、价格与平台支持细节。