/accessibility-review

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

对设计稿或网页进行 WCAG 2.1 AA 可访问性合规性审查。

用法

/accessibility-review $ARGUMENTS

执行可访问性审查：@$1

WCAG 2.1 AA 快速参考指南

可感知（Perceivable）

• 1.1.1 非文本内容具备替代文本（alt text）
• 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 触控目标尺寸 ≥ 44×44 CSS 像素

可理解（Understandable）

• 3.2.1 聚焦时行为可预期（无意外变更）
• 3.3.1 错误识别（明确描述错误）
• 3.3.2 表单输入项具备标签或说明

健壮（Robust）

• 4.1.2 所有 UI 组件均具备名称（name）、角色（role）和值（value）

常见问题

1. 颜色对比度不足
2. 表单控件缺少关联标签（form labels）
3. 交互式元素无法通过键盘访问
4. 具有信息意义的图片缺失 alt 文本
5. 模态框（modals）中存在焦点陷阱（focus traps）
6. 缺失 ARIA 页面地标（landmarks）
7. 媒体内容自动播放且无控制选项
8. 存在时间限制但未提供延长时间的机制

测试方法

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

输出格式

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

### 概要
**发现问题数：** [X] | **严重级：** [X] | **主要级：** [X] | **次要级：** [X]

### 审查发现

#### 可感知（Perceivable）
| # | 问题 | WCAG 准则 | 严重程度 | 建议修复方案 |
|---|------|-----------|------------|----------------|
| 1 | [问题描述] | [1.4.3 对比度] | 🔴 严重 | [修复建议] |

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

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

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

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

### 键盘导航测试
| 元素 | Tab 键顺序 | Enter / Space 键行为 | Escape 键行为 | 方向键行为 |
|------|-------------|--------------------------|------------------|----------------|
| [元素名称] | [顺序编号] | [行为描述] | [行为描述] | [行为描述] |

### 屏幕阅读器测试
| 元素 | 屏幕阅读器播报内容 | 是否存在问题 |
|------|------------------------|------------------|
| [元素名称] | [屏幕阅读器实际播报文本] | [如有问题请说明] |

### 优先级修复建议
1. **[严重级修复项]** — 影响 [目标用户群体]，阻碍 [具体功能或流程]
2. **[主要级修复项]** — 提升 [某方面体验] 对 [目标用户群体] 的可用性
3. **[次要级修复项]** — 优化建议，非必需但推荐实施

若已启用连接器（Connectors）

若已连接 ~~design tool：

• 可直接从 Figma 中检查颜色值、字体大小及触控目标尺寸
• 可在设计规范中核查组件的 ARIA role 及键盘交互行为

若已连接 ~~project tracker：

• 为每项可访问性问题自动生成工单（ticket），并标注严重等级与对应 WCAG 准则
• 将问题发现关联至现有可访问性整改 epic

实用提示

1. 优先检查对比度与键盘导航 — 这两项能快速识别最常见且影响最大的问题。
2. 务必使用真实辅助技术测试 — 本审查是良好起点，但 VoiceOver/NVDA 手动测试可发现自动化工具无法覆盖的问题。
3. 按用户影响程度排序修复优先级 — 优先解决阻碍用户使用的核心问题，细节优化可后续推进。