SuperAPI AI 工具集

a11y

通用与其它

查看项目

更新于 10-15 23:33

技能介绍

用途:在构建 UI 组件、交互元素或审计无障碍合规时,提供 WCAG 2.1/2.2(A 至 AAA)的实践指导,确保语义结构、ARIA、对比度与键盘导航符合要求。

主要能力:覆盖文档语言(SC 3.1.1)、语义 HTML(SC 1.3.1)、键盘可访问性(SC 2.1.1)、表单标签与校验错误(SC 1.3.1/3.3.1/3.3.2/3.3.3)、图片与 SVG 替代文本(SC 1.1.1)、展开/折叠模式(SC 4.1.2)、SPA 路由切换(SC 2.4.2/2.4.3/4.1.3)等关键模式,并给出对比度阈值:普通文本 AA 4.5:1、AAA 7:1;大文本 AA 3:1、AAA 4.5:1;UI 组件与焦点指示器 3:1。触控目标最小 24×24px(WCAG 2.2),推荐 44×44px。

使用方式:优先使用框架自带的无障碍原语(MUI、Radix UI、React Aria、Headless UI);语义 HTML 不足时再用 ARIA;确保所有交互元素可键盘到达、焦点可见、Escape 关闭弹层。SPA 路由切换时更新 document.title、通过持久 aria-live="polite" 区域播报,并将焦点移至带 tabindex="-1" 的 main。表单错误用 aria-invalid="true" 配合 aria-describedby 与 role="alert",多字段提交错误时将焦点移至错误摘要。

适用场景:构建表单、模态框、自定义组件、动态内容与实时区域,或对组件/页面做 WCAG 合规审计。

限制:不适用于具体技术栈实现(react、html 技能)与无 UI 的后端逻辑;复杂组件需参考 WAI-ARIA Authoring Practices;快速更新的 live region 可能被节流,需防抖或使用 aria-atomic="true";React 等库可能干扰焦点管理,需显式测试焦点陷阱。具体安装命令与价格信息暂未提供。