SuperAPI AI 工具集

ui-a11y

前端与建站

查看项目

更新于 10-16 01:09

技能介绍

ui-a11y 是一个面向组件的可访问性审计技能,用途是检查组件或页面中的无障碍问题并直接修复。目标参数为 $ARGUMENTS,适合在需要按 WCAG 2.2 AA 做静态代码审计时使用。

主要能力按四类标准展开。可感知:检查文本颜色对比度(普通文本 4.5:1、大号或粗体 3:1)、非文本对比度 3:1、图片 alt、有意义的图标 aria-label,以及信息不能仅靠颜色传达。可操作:触控目标至少 44x44px(min-h-11 min-w-11),指出常见违规如 h-9 按钮应为 h-11,图标按钮需显式尺寸 w-11 h-11;要求所有交互元素可键盘访问、Tab 顺序合理、提供 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2,并尊重 prefers-reduced-motion。可理解:表单输入需可见标签或 aria-label,错误信息用 aria-describedby 关联,html 需带 lang。健壮:使用语义化标签、Radix UI 组件自动处理 ARIA、自定义交互元素补 role。

它还给出设计系统 token 的最低对比度参考,如 --foreground 7:1+、--muted-foreground 4.5:1+、--brand 4.5:1+、--destructive 4.5:1+、--success 3:1+(仅大文本/图标)、--warning 4.5:1+,并提示需按实际皮肤品牌色验证。

输出形式为:按严重程度(Critical/Major/Minor)列出发现的问题;能自动修复的直接应用;需要人工判断的单独标记。

限制:不用于通用设计系统合规审查(应使用 /ss-review)、Nielsen UX 启发式评估(/ss-audit)、非 StyleSeed 代码(不假设 data-slot 与语义 token),也不做运行时测试,它是静态代码审计而非屏幕阅读器模拟。使用前应确认任务与上游来源及本地项目上下文匹配,并自行验证命令、生成代码、依赖、凭据和外部服务行为,示例不能替代环境测试、安全审查或破坏性操作的审批。