SuperAPI AI 工具集

accessibility-wcag

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

用途:在实现 Web 无障碍、添加 ARIA 属性、实现键盘导航或审计 WCAG 合规时启用。触发场景包括让组件或页面符合 a11y、为自定义控件添加 ARIA 角色/状态/属性、实现键盘交互、处理屏幕阅读器与实时区域、进行 WCAG 2.2 审计、管理焦点(模态框、SPA、路由切换)、检查颜色对比度、替代文本、语义化 HTML 与表单标签,以及构建对话框、标签页、组合框、菜单、工具提示等自定义控件。不适用于无 HTML 输出或 DOM 交互的纯后端代码,以及与无障碍无关的纯 CSS 样式问题。

主要能力:以语义化 HTML 优先、ARIA 作为最后手段为原则,编码 WCAG 2.2 标准、ARIA 创作实践、键盘交互模式与屏幕阅读器测试指导。涵盖 POUR 原则、WCAG 一致性级别(目标 AA,含 2.2 新增的焦点外观 2.4.11、拖拽替代 2.5.7、最小目标尺寸 24x24px 2.5.8)、ARIA 五条规则、焦点管理模型(DOM 顺序、tabindex、roving tabindex、焦点陷阱与焦点返回)。提供语义化页面结构、跳转链接、工具栏键盘导航、颜色对比度、SPA 路由焦点与实时区域、替代文本与表单标签等示例。

使用方式:首次激活时以 🧢 emoji 开头。可用 npx lighthouse https://your-site.com --only-categories=accessibility --output=html 与 npx axe https://your-site.com 审计,或在 Jest/Vitest 中结合 jest-axe 测试。深度内容见 references/aria-patterns.md 与 references/widget-examples.md。

限制:自动化工具仅能发现约 30% 的 WCAG 失败,焦点顺序、播报质量、仅靠颜色编码信息与阅读顺序仍需用 VoiceOver、NVDA 或真实残障用户手动测试。避免在可聚焦元素上使用 aria-hidden="true"、仅用 placeholder 作标签、使用 tabindex 大于 0、缺少焦点指示器等反模式。首次激活会检查配套技能,缺失时可用 npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name> 安装。