SuperAPI AI 工具集

a11y

前端与建站

查看项目

更新于 10-15 17:18

技能介绍

用途:审计前端改动(diff)的无障碍问题,聚焦可能影响辅助技术的变更,而非每次样式微调。触发场景包括新增或修改交互组件、表单、图片/媒体/图标、ARIA 属性、焦点与键盘处理、颜色对比、动效等;纯文案或间距 CSS 改动无需运行。

主要能力:分两层。静态层安全可自动运行,仅读改动的 JSX/TSX/Vue/Svelte/HTML/CSS,从标记本身标记缺陷,无需浏览器或外部工具。动态层为推荐/可选,当开发 URL 可达时,通过 axe-core / Chrome DevTools MCP 检查计算后的对比度、焦点顺序和屏幕阅读器无障碍树。检查维度覆盖语义与地标、名称/角色/值、图片与图标、表单、键盘、焦点管理、屏幕阅读器播报、颜色与对比度、动效与减少动效、回流与缩放。

使用方式:先确定改动的前端文件(或 $ARGUMENTS glob),无匹配触发条件则停止;再做静态扫描,记录 file:line、WCAG 成功标准与用户影响;若有开发 URL 则做动态扫描,否则记录 SKIPPED(无开发服务器);最后按严重程度分组报告,给出每个问题的最小修复并草拟修正标记,但不应用。报告格式含 CRITICAL 与 SERIOUS/MODERATE/MINOR 分组及动态扫描结果。

限制与规则:每条发现须有证据(file:line、元素、WCAG 标准、具体用户影响);严重程度按用户影响而非规则教条;优先原生语义而非给 div 加 ARIA;仅审计改动范围;不应用修复,由用户或 /design-review 执行;不得在无测量比值时报告“低对比度”。相关命令有 /design-audit、/web-perf、/design-review、/qa-only。