mcpField
W
wcag-audit-patterns

wcag-audit-patterns

github.com/wshobson测试与质量41.9k12.7k 次安装2 周前更新
代码仓库

关于 wcag-audit-patterns

面向网站无障碍审查团队的实用指南，依据 WCAG 2.2 整理符合等级与常见问题，并提供便于整改的实现建议。

主要功能

  1. 01WCAG 符合等级
  2. 02POUR 原则
  3. 03按影响程度整理常见问题
  4. 04可执行的整改指导
  5. 05手动与自动化测试实践

适用场景

  1. 01审查网站的无障碍问题
  2. 02确定 WCAG 问题整改优先级
  3. 03构建无障碍组件
  4. 04准备 ADA、Section 508 或 VPAT 相关工作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

安装后在 Claude Code 中输入/wcag-audit-patterns确认已加载。

附带文件references/details.md

详细介绍

WCAG 审核模式

对照 WCAG 2.2 准则审核网页内容并给出可操作修复策略的全面指南。

何时使用本技能

  • 开展无障碍审核
  • 修复 WCAG 违规问题
  • 实现无障碍组件
  • 为无障碍诉讼做准备
  • 满足 ADA/Section 508 要求
  • 达成 VPAT 合规

核心概念

1. WCAG 合规级别
级别描述适用范围
A最低无障碍法律基线
AA标准合规大多数法规
AAA增强无障碍特殊需求
2. POUR 原则
Perceivable:  Can users perceive the content?
Operable:     Can users operate the interface?
Understandable: Can users understand the content?
Robust:       Does it work with assistive tech?
3. 按影响划分的常见违规
Critical (Blockers):
├── Missing alt text for functional images
├── No keyboard access to interactive elements
├── Missing form labels
└── Auto-playing media without controls

Serious:
├── Insufficient color contrast
├── Missing skip links
├── Inaccessible custom widgets
└── Missing page titles

Moderate:
├── Missing language attribute
├── Unclear link text
├── Missing landmarks
└── Improper heading hierarchy

详细模式与示例

详细模式文档位于 references/details.md。当上述导航层级不够用时，请阅读该文件。

最佳实践

应做
  • 尽早开始 - 从设计阶段就考虑无障碍
  • 与真实用户测试 - 残障用户能提供最佳反馈
  • 尽可能自动化 - 30-50% 的问题可被检测
  • 使用语义化 HTML - 减少对 ARIA 的需求
  • 记录模式 - 构建无障碍组件库
不应做
  • 不要只依赖自动化测试 - 必须进行手动测试
  • 不要把 ARIA 作为首选方案 - 优先使用原生 HTML
  • 不要隐藏焦点轮廓 - 键盘用户需要它们
  • 不要禁用缩放 - 用户需要调整大小
  • 不要只使用颜色 - 需要多种指示方式

评论

支持 Markdown