mcpField
A
accessibility-review

accessibility-review

github.com/anthropics设计与 UI33.6k4.1k 次安装1 天前更新
代码仓库

关于 accessibility-review

依据 WCAG 2.1 AA 审查设计或页面的无障碍性技能，涵盖可感知性、可操作性、可理解性和健壮性，并生成问题报告。

主要功能

  1. 01按 WCAG 2.1 AA 审查
  2. 02检查键盘操作与焦点
  3. 03检查对比度、标签和替代文本
  4. 04使用辅助技术进行测试
  5. 05生成按优先级排列的审查结果

适用场景

  1. 01发布前检查页面
  2. 02发现键盘导航障碍
  3. 03整理无障碍修复问题

安装

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

$npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

安装后在 Claude Code 中输入/accessibility-review确认已加载。

详细介绍

/accessibility-review

如果您看到不熟悉的占位符，或需要确认已连接哪些工具，请参阅 CONNECTORS.md。

针对设计稿或页面进行 WCAG 2.1 AA 无障碍合规性审核。

用法

/accessibility-review $ARGUMENTS

无障碍审核：@$1

WCAG 2.1 AA 速查

可感知（Perceivable）
  • 1.1.1 非文本内容提供替代文本
  • 1.3.1 信息和结构可通过语义传达
  • 1.4.3 对比度 >= 4.5:1（普通文本），>= 3:1（大号文本）
  • 1.4.11 非文本对比度 >= 3:1（UI 组件、图形）
可操作（Operable）
  • 2.1.1 所有功能均可通过键盘使用
  • 2.4.3 焦点顺序合乎逻辑
  • 2.4.7 焦点指示器可见
  • 2.5.5 触控目标 >= 44x44 CSS 像素
可理解（Understandable）
  • 3.2.1 获得焦点时行为可预测（无意外变化）
  • 3.3.1 错误标识（描述错误内容）
  • 3.3.2 输入项提供标签或说明
健壮（Robust）
  • 4.1.2 所有 UI 组件均具备名称、角色和值

常见问题

  1. 颜色对比度不足
  2. 表单缺少标签
  3. 交互元素无法通过键盘访问
  4. 有意义的图片缺少替代文本
  5. 模态框中存在焦点陷阱
  6. 缺少 ARIA 地标
  7. 无控件的自动播放媒体
  8. 时间限制且无延长选项

测试方法

  1. 自动化扫描（可发现约 30% 的问题）
  2. 仅使用键盘导航
  3. 屏幕阅读器测试（VoiceOver、NVDA）
  4. 颜色对比度验证
  5. 缩放至 200%——布局是否会失效？

输出

## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]

### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]

### Findings

#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |

#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |

#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |

#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |

### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |

### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |

### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |

### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have

如果可以使用连接器

如果已连接 ~~设计工具：

  • 直接从 Figma 检查颜色值、字号和触控目标
  • 在设计规范中检查组件的 ARIA 角色和键盘行为

如果已连接 ~~项目跟踪工具：

  • 为每个无障碍问题创建工单，并注明严重程度和 WCAG 标准条款
  • 将问题关联到现有的无障碍修复史诗（Epic）

建议

  1. 优先检查对比度和键盘操作——这些问题最常见，影响也最大。
  2. 使用真实的辅助技术进行测试——我的审核只是一个良好的开端，而 VoiceOver/NVDA 的人工测试能发现我无法识别的问题。
  3. 按影响程度排序——先修复阻碍用户的问题，再进行细节打磨。

评论

支持 Markdown