accessibility-compliance-accessibility-audit
使用 WCAG 审计 Web 可访问性
此技能帮助开发者使用自动化工具和手动测试进行全面的 WCAG 合规性审计，识别可访问性障碍并提供修复指导。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“accessibility-compliance-accessibility-audit”。 Run WCAG AA audit on example.com
预期结果:
可访问性审计结果：得分 72/100。严重问题：3 个（缺失 alt 文本、表单标签）。重要问题：5 个（对比度、焦点指示器）。提供建议修复的代码示例。
正在使用“accessibility-compliance-accessibility-audit”。 How do I fix keyboard trap in modal?
预期结果:
修复键盘陷阱的方法：1) 添加 Escape 键处理程序关闭模态框。2) 确保焦点返回到触发元素。3) 模态框打开时将焦点限制在内部。查看 React 和 ARIA 的代码示例。
安全审计
安全Security review complete. All static findings are false positives. The skill provides legitimate accessibility testing examples using standard tools (axe-core, Puppeteer). No actual command injection, credential access, or malicious network requests present. Code examples are for local accessibility testing only.
质量评分
你能构建什么
发布前可访问性审计
在发布网站之前运行全面的可访问性审计，确保 WCAG AA 合规性并识别障碍。
修复指导
获取逐步修复特定可访问性违规的指导，包含代码示例。
可访问性教育
学习键盘导航、屏幕阅读器支持和包容性设计模式的最佳实践。
试试这些提示
Run a WCAG AA accessibility audit on my website at [URL]. Identify the top issues and provide remediation steps.
Test the login form component for accessibility. Check for proper labels, keyboard navigation, error handling, and screen reader announcements.
I have [specific accessibility issue]. Provide detailed code examples to fix this using React and ARIA attributes.
Create a GitHub Actions workflow to run automated accessibility tests on every pull request using axe-core.
最佳实践
- 始终使用真实的辅助技术进行测试，而不仅仅是自动化工具
- 按用户影响优先级排序修复（严重 > 重要 > 中等 > 轻微）
- 在代码注释中记录可访问性决策和理由
- 在 CI/CD 流水线中包含可访问性测试
避免
- 仅依赖自动化工具而不进行手动测试
- 仅使用颜色作为传达信息的唯一方式
- 设置 tabindex > 0 破坏逻辑制表符顺序
- 在不理解 ARIA 属性含义的情况下添加它们