在没有结构化指导的情况下,手动无障碍审计既缓慢又容易出错。此技能提供系统化的 WCAG 2.2 检查清单、自动化测试集成以及经过验证的修复模式。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“wcag-audit-patterns”。 审计我的导航菜单是否存在无障碍问题
预期结果:
发现 4 个 WCAG 违规:缺少跳过链接 (2.4.1 A)、下拉菜单中存在键盘陷阱 (2.1.2 A)、缺少 aria-expanded 状态 (4.1.2 A) 以及焦点指示器对比度不足 (2.4.7 AA)。修复后的导航代码包含跳过链接、正确的焦点陷阱、ARIA 状态以及对比度为 4.5:1 的 3px 实线焦点轮廓。
正在使用“wcag-audit-patterns”。 修复登录表单上的颜色对比度错误
预期结果:
原始灰色文本 (#888888) 在白色背景上的对比度为 2.8:1。已更新为 #595959 以达到 4.5:1 AA 合规。错误状态现在使用红色 (#D32F2F) 并配合图标和文本消息,而非仅使用颜色。焦点指示器已更改为 3px 蓝色轮廓,在 4.6:1 对比度下可见。
安全审计
安全Static analyzer flagged 76 patterns but all are false positives. The skill contains Markdown documentation with code examples, not executable code. Detected backticks are markdown fences, URLs are reference links, and no actual shell execution, network calls, or credential access exists.
质量评分
你能构建什么
电商无障碍审计
在产品发布前审计在线商店是否符合 WCAG 2.2 AA 标准。对关键页面运行自动扫描,对结账流程执行手动键盘测试,并修复关键障碍,如缺失的表单标签和键盘陷阱。
政府网站合规
审查公共部门网站是否符合 Section 508 和 ADA 标准。记录所有违规项,按用户影响优先级排序,并提供符合联邦无障碍标准的修复代码。
无障碍诉讼修复
通过审计被引用的页面、识别所有 WCAG 违规项并实施修复,同时��法律抗辩提供文档证据,来回应无障碍要求信。
试试这些提示
审计我网站首页的 WCAG 2.2 A 级违规。列出发现的所有问题,解释每个问题为何违反 WCAG,并为每个问题提供修复后的代码示例。
审查我的自定义下拉菜单组件是否存在无障碍问题。检查键盘导航、焦点管理、ARIA 属性和屏幕阅读器兼容性。提供通过 WCAG 2.2 AA 标准的修正代码。
对我的电商网站进行完整的 WCAG 2.2 AA 审计。包括使用 axe-core 的自动化测试设置、键盘和屏幕阅读器流程的手动测试清单,以及针对所有违规的优先修复计划和代码修复。
分析我的设计系统颜色是否符合 WCAG 2.2 对比度标准。测试常规和大型文本的所有文本-背景组合,检查 UI 组件对比度,并建议在保持品牌标识的同时符合无障碍要求的颜色替代方案。
最佳实践
- 在设计阶段而非开发之后开始无障碍测试
- 在添加 ARIA 属性之前优先使用语义化 HTML 元素
- 在发布前使用仅键盘模式和至少一种屏幕阅读器进行测试
避免
- 仅依赖自动化测试工具而不进行手动验证
- 为视觉设计偏好隐藏焦点轮廓
- 仅使用颜色作为错误或必填字段的唯一指示符