用途:在 Stitch 设计生成组件之后、发布之前,对组件做 WCAG 2.1 AA 无障碍审计,并直接把修复写入源文件,而不只是输出问题清单。适合交互复杂的设计(模态框、下拉菜单、标签面板、手风琴、轮播),或用户提到 accessibility、a11y、WCAG、屏幕阅读器、键盘导航时使用。
主要能力:按六个类别系统检查并修复。一是语义 HTML,如用 nav、button、a、ul/li 替代 div/span 与 div onClick,修正标题层级与布局表格。二是 ARIA 属性,为纯图标按钮补可访问名称,为多个 nav 加 aria-label,为动态状态区加 aria-live,为下拉补 aria-expanded、aria-haspopup、aria-controls。三是键盘导航,处理 Tab 可达性、tabIndex 误用、模态框打开时移入焦点、关闭后焦点返回触发元素、Escape 关闭后焦点归位。四是焦点可见性,禁止无替代地移除 outline,改用 :focus-visible 或 Tailwind 的 focus-visible:ring-*。五是图片与媒体,区分有意义图片与装饰图片的 alt,图标按钮加标签,视频需字幕。六是颜色与对比,检查弱化文字、主色小字号、禁用态可读性,以及不单靠颜色传达错误或必填信息。
使用方式:先读取项目结构定位组件文件,例如 Next.js/React 用 find src -name ".tsx" -not -path "/node_modules/",SvelteKit 用 find src -name ".svelte" -not -path "/node_modules/",逐个阅读后再审计,重点放在交互组件。修复后生成 accessibility-audit.md,按严重、重要、次要列出问题与修复,并给出测试步骤:Tab 遍历、Enter/Space 激活、VoiceOver 或 NVDA 验证、DevTools 模拟 prefers-reduced-motion、axe DevTools 自动检查。必要时在全局 CSS 添加 .sr-only 与 .skip-link,并在页面布局首个元素加入跳转主内容链接。
限制:资料未提供安装命令、收费方式、支持平台与版本要求;审计依赖人工推理与工具辅助,颜色对比等需自行验证,部分问题需设计变更或用户测试才能解决。