SuperAPI AI 工具集

accessibility

前端与建站

查看项目

更新于 10-16 02:36

技能介绍

用途:对 UI 组件做无障碍审查与整改建议,核心是优先使用语义化 HTML,仅在原生元素不足时补充 ARIA,并确保键盘可用与 WCAG 2.2 AA 合规。

主要能力:审查语义结构(header、nav、main、article 等代替 div);检查 ARIA 使用(role、aria-label、aria-hidden、aria-live 等,避免冗余 ARIA);验证键盘导航(Tab/Shift+Tab、Enter/Space、方向键、Escape)与焦点管理(模态框焦点陷阱、关闭后焦点返回触发元素、跳转主内容链接、:focus-visible 可见焦点);检查颜色对比度(正文 4.5:1、大文本 3:1、UI 组件 3:1);检查图片 alt 文本、图标按钮标签、动态内容 live region;检查表单标签、fieldset/legend、aria-describedby 错误提示与必填标记。覆盖 WCAG 2.2 新增项:2.4.11 焦点不被 sticky 遮挡、2.5.7 拖拽需有单击替代、2.5.8 触控目标至少 24x24 CSS 像素、3.2.6 帮助机制顺序一致、3.3.7 冗余输入自动填充、3.3.8 认证不得仅依赖认知测试(允许粘贴密码、提供替代验证)。

使用方式:按步骤执行审查并生成报告,含问题总数与严重级别、WCAG 等级合规状态、违规位置、修复建议与代码示例及测试记录。示例调用:Skill({ skill: 'accessibility' });、Skill({ skill: 'accessibility', args: 'color-contrast' });、Skill({ skill: 'accessibility', args: 'forms' });。可用于审查 React 组件、CSS 颜色定义、表单组件等。

限制:自动化工具(axe、Lighthouse)最多发现约 30% 问题,必须结合 NVDA、JAWS、VoiceOver 等真实辅助技术及纯键盘、200% 缩放测试;不得移除焦点指示、不得对非交互元素绑定点击、不得用 tabindex>0、不得依赖颜色单独传递信息。资料未提供安装命令、收费方式与平台要求。