/accessibility-review

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

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

用法

/accessibility-review $ARGUMENTS

进行无障碍审计：@$1

WCAG 2.1 AA 快速参考

可感知

可操作

可理解

健壮

常见问题

  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 顺序 | Enter/Space | Escape | 方向键 |
|---------|-----------|-------------|--------|------------|
| [元素] | [顺序] | [行为] | [行为] | [行为] |

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

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

如果连接器可用

如果连接了 ~~design tool：

如果连接了 ~~project tracker：

提示

  1. 从对比度和键盘开始 —— 这些能发现最常见和最有影响的问题。
  2. 使用真实的辅助技术测试 —— 我的审计是一个很好的起点，但使用 VoiceOver/NVDA 进行手动测试能发现我无法发现的问题。
  3. 按影响优先级排序 —— 先修复阻碍用户的问题，再进行打磨。