/accessibility-review

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

根据 WCAG 2.1 AA 可访问性标准审核设计或页面。

使用方法

/accessibility-review $参数

审核可访问性：@$1

WCAG 2.1 AA 快速参考

可感知

• 1.1.1 非文本内容需要有替代文本
• 1.3.1 信息和结构通过语义化方式呈现
• 1.4.3 对比度 ≥ 4.5:1（普通文本），≥ 3:1（大号文本）
• 1.4.11 非文本对比度 ≥ 3:1（界面组件、图形）

可操作

• 2.1.1 所有功能均可通过键盘操作
• 2.4.3 逻辑的焦点顺序
• 2.4.7 可见的焦点指示器
• 2.5.5 触摸目标 ≥ 44×44 CSS 像素

可理解

• 3.2.1 获得焦点时行为可预测（无意外变化）
• 3.3.1 错误识别（描述错误）
• 3.3.2 为输入项提供标签或说明

健壮性

• 4.1.2 所有界面组件都有名称、角色和值

常见问题

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

测试方法

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

输出

## 可访问性审核：[设计/页面名称]
**标准：** WCAG 2.1 AA | **日期：** [日期]

### 摘要
**发现的问题：** [X] | **严重：** [X] | **主要：** [X] | **次要：** [X]

### 发现详情

#### 可感知
| # | 问题 | WCAG 标准 | 严重程度 | 建议 |
|---|-------|---------------|----------|----------------|
| 1 | [问题] | [1.4.3 对比度] | 🔴 严重 | [修复方案] |

#### 可操作
| # | 问题 | WCAG 标准 | 严重程度 | 建议 |
|---|-------|---------------|----------|----------------|
| 1 | [问题] | [2.1.1 键盘] | 🟡 主要 | [修复方案] |

#### 可理解
| # | 问题 | WCAG 标准 | 严重程度 | 建议 |
|---|-------|---------------|----------|----------------|
| 1 | [问题] | [3.3.2 标签] | 🟢 次要 | [修复方案] |

#### 健壮性
| # | 问题 | WCAG 标准 | 严重程度 | 建议 |
|---|-------|---------------|----------|----------------|
| 1 | [问题] | [4.1.2 名称、角色、值] | 🟡 主要 | [修复方案] |

### 颜色对比度检查
| 元素 | 前景色 | 背景色 | 比率 | 要求 | 通过？ |
|---------|-----------|------------|-------|----------|-------|
| [正文文本] | [颜色] | [颜色] | [X]:1 | 4.5:1 | ✅/❌ |

### 键盘导航
| 元素 | Tab 顺序 | 回车/空格键 | 退出键 | 方向键 |
|---------|-----------|-------------|--------|------------|
| [元素] | [顺序] | [行为] | [行为] | [行为] |

### 屏幕阅读器
| 元素 | 朗读内容 | 问题 |
|---------|-------------|-------|
| [元素] | [屏幕阅读器读出内容] | [如有问题] |

### 优先修复项
1. **[严重问题]** — 影响 [谁]，阻碍了 [什么]
2. **[主要问题]** — 为 [谁] 改善 [什么]
3. **[次要问题]** — 锦上添花

如果连接器可用

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

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

如果 ~~项目跟踪器 已连接：

• 为每个可访问性问题创建工单，附带严重程度和 WCAG 标准
• 将发现的问题链接到现有的可访问性修复主题

提示

1. 从对比度和键盘开始 — 这些问题最常见且影响最大。
2. 用真实的辅助技术测试 — 我的审核是个很好的起点，但用 VoiceOver/NVDA 手动测试能发现我无法发现的问题。
3. 按影响程度排序 — 先修复阻碍用户的问题，再处理优化项。