SuperAPI AI 工具集

a11y

通用与其它

查看项目

更新于 10-15 19:52

技能介绍

用途:在构建或审查界面时,确保仅用键盘或屏幕阅读器也能完整操作。核心是优先使用原生元素,让指针操作成为增强而非前提。

主要能力:覆盖键盘可达性(Tab 可达、Enter/Space/方向键可操作)、焦点管理(打开时移入、关闭时归还触发元素)、focus-visible 焦点环、ARIA 角色与状态、实时区域播报、减少动态效果、缩放与文字间距等。

使用方式:先读项目再动手。若已使用 Radix、Base UI、React Aria 或 Headless UI,应配置并删除重复实现;若已有 FocusScope 或 useFocusTrap,沿用即可;纯语义 HTML 项目通常只需替换元素而非加属性。需要具体控件的键位与 ARIA 契约时查阅 references/aria-recipes.md;审查现有界面或 PR 时查阅 references/audit.md。

关键原则:原生元素优先于 ARIA 属性;Tab 顺序即 DOM 顺序,禁止正 tabindex;不可见内容必须不可聚焦(inert 或 visibility: hidden);:focus-visible 提供焦点环,outline: none 必须配对替代;焦点打开进入、关闭归还,不得落在 body;一次只设一个焦点陷阱,Escape 只关闭一层;路由变化时把焦点移到新标题,异步结果写入预先存在的实时区域;assertive 仅用于提交失败与数据丢失;减少动态效果时保留透明度与颜色过渡,去掉位移;不得禁用缩放,页面需在 200% 缩放与强制文字间距下不裁切。

适用场景:对话框、菜单、组合框、标签页、列表、网格等控件的无障碍实现与审查。

限制:资料未提供安装命令、收费、平台或效果数据;对比度归 color 负责,指针物理归 touch-input 负责,本技能不重复。发现应按“元素 → 破坏的输入路径 → 用户遭遇 → 修复”一行记录。