SuperAPI AI 工具集

taste-accessibility

前端与建站

查看项目

更新于 10-18 16:13

技能介绍

taste-accessibility 是一个面向界面生成过程的无障碍技能。其核心主张是:AI 生成的界面默认存在无障碍问题,因此要把无障碍规则施加在生成阶段,而不是在生成完成后再做修复。

用途 在生成页面、组件和表单时同步落实无障碍要求,让可访问性成为默认结果。技能文档强调“无障碍不是一项功能,而是界面本身能否正常工作”。

主要能力

  1. 语义结构:每页仅一个 <h1>,标题层级不得跳级;使用 header、nav、main、footer 等地标,并配合有意义的 aside、section;导航与功能列表使用列表元素,表格仅用于表格数据并带 th scope;按钮用 button、链接用 a href 且有可见文本,纯图标控件配 aria-label;装饰图片 alt 为空,信息图片 alt 描述含义而非外观;装饰性 SVG 加 aria-hidden 与 tabindex=-1,且不得对可聚焦元素使用 aria-hidden。
  2. 键盘完整可达:Tab 顺序与视觉顺序一致;焦点样式处处可见(2px 焦点环、与相邻区域 3:1 对比、outline-offset 不小于 2px),不得无替代地使用 outline: none;Enter 激活按钮链接、Space 切换、Esc 关闭对话框与菜单;对话框打开时焦点移入并限制在内部,关闭后回到触发元素,遮罩具备 role=dialog、aria-modal=true 与可访问名称;每个营销页首个可聚焦元素为跳转链接;自定义组件需正确实现 ARIA 模式,否则优先使用原生元素。
  3. 对比度与目标尺寸:正文至少 4.5:1,大文本至少 3:1,UI 组件与焦点至少 3:1;指针目标至少 24×24px(推荐 44×44px);仅占位符作标签不合格,每个输入需程序化关联标签;错误状态不得仅靠颜色,需文字与图标并通过 aria-live 播报,错误信息要指明字段并给出修复方式。
  4. 表单:按输入类型使用正确 type 与 autocomplete 令牌;使用 required 与 aria-required,校验样式基于 :user-invalid 并显示消息;四个及以上字段采用单列布局,标签在输入上方,提示文字用 aria-describedby 关联;多步向导需播报进度、顶部汇总错误、前后按钮键盘安全。
  5. 动效与认知:所有动效纳入 prefers-reduced-motion 处理,不启用视差、轮播自动播放与跑马灯;不自动播放带声音媒体,轮播悬停或聚焦时暂停;超时需至少 20 秒预警或用户可控;使用平实语言,首次出现时展开缩写,不用纯 emoji 传达信息。
  6. 测试:完成前做键盘遍历、屏幕阅读器朗读检查(页面标题、标题大纲、控件标注、区域播报)、逐对采样文字与背景对比度、200% 缩放检查横向滚动与文字截断、检查 aria-label 不重复可见文本且无空按钮链接、明暗两种主题均通过。
  7. 检查清单:标题跳级、输入无关联标签、交互元素键盘不可达、焦点指示不可见或无替代的 outline: none、非有意记录例外的对比度不足、仅以颜色传达错误、无 reduced-motion 处理、触控目标小于 24px 且间距不足 24px,任一项即判定页面不合格。

使用方式 资料未提供具体安装命令、调用方式或运行环境说明,暂未提供。

适用场景 适用于生成网页与界面、编写前端组件、构建表单和交互控件的场景,可作为生成与验收阶段的无障碍规则集。

限制 规则针对 WCAG 2.2 AA 的若干检查点;资料未说明支持的框架、工具链、自动化测试集成或版本兼容性,暂未提供。