无障碍性
让界面无需鼠标、无需完美视力、也无需忍受歧义即可使用。
何时使用
当用户：
- 希望进行无障碍性审查；
- 正在构建表单、导航、模态框或交互组件；
- 需要 WCAG 指导；
- 希望支持键盘或屏幕阅读器；
- 询问对比度或焦点状态。
1. 界定范围
- 哪些页面或组件？
- 哪些用户群体和辅助技术是重要的？
- 适用哪个标准：WCAG 2.2 AA、内部政策、法律要求？
- 哪些内容不在范围内？
2. 检查基础项
语义
- 使用原生元素：
button、a、input、label、nav、main。 - 不要将
div用作按钮。 - 按顺序使用标题。
- 为地标和区块提供可访问的名称。
键盘
- 每个交互元素都能通过 Tab 键到达。
- 焦点顺序与视觉顺序一致。
- 焦点可见。
- 无键盘陷阱。
- Escape 键关闭模态框。
- 在菜单、标签页和网格中，方向键按预期工作。
表单
- 每个输入框都有标签。
- 错误信息会被宣布并链接到对应字段。
- 必填字段以文本形式标记，而非仅用颜色。
- 在适当的地方使用自动补全。
- 说明在字段之前。
图片和媒体
- 有意义的图片包含替代文本。
- 装饰性图片使用空的替代文本。
- 视频包含字幕。
- 音频包含文字转录。
- 信息不能仅通过颜色传达。
对比度和文本
- 文本对比度符合 WCAG AA 标准。
- 文本可调整大小至 200% 而不丢失内容。
- 行长度和间距易于阅读。
- 内容在 320px 宽度下能重新排列。
动态内容
- 加载状态会被宣布。
- 提示和警报使用合适的 live 区域。
- 模态框管理焦点。
- 客户端路由变化会更新标题和焦点。
3. 测试
- 纯键盘走查。
- 屏幕阅读器冒烟测试（如果可用）。
- 放大到 200%。
- 高对比度模式。
- 减少动效模式。
- 自动检查，但要明白它们只能发现部分问题。
输出格式
## 范围
## 发现的问题
### <严重程度>: <问题>
- **位置:** `<路径或组件>`
- **WCAG:** <准则>
- **影响:** <谁被阻止以及如何被阻止>
- **修复:** <具体修改>
- **验证:** <如何测试>
## 工作正常的方面
## 未测试项
## 优先级
1. ...
规则
- 不要仅凭自动化扫描声称完全符合 WCAG。
- 不要使用
aria-*来修复糟糕的语义。 - 不要在没有可见替代方案的情况下移除焦点轮廓。
- 不要仅依赖颜色。
- 不要使用仅供屏幕阅读器的类来替代标签。
- 如果审查不完整，请说明哪些部分未测试。
质量检查
- 使用了原生语义。
- 键盘访问正常。
- 焦点可见。
- 表单有标签和错误提示。
- 对比度足够。
- 动态内容会被宣布。
- 审查中说明了哪些内容未测试。