文章目录
- [一、WCAG 的整体结构](#一、WCAG 的整体结构)
- [二、AA 等级意味着什么？](#二、AA 等级意味着什么？)
- [三、WCAG 2.1 AA 的关键要求（前端重点）](#三、WCAG 2.1 AA 的关键要求（前端重点）)
-
- [1. 对比度（最常见问题）](#1. 对比度（最常见问题）)
- [2. 键盘可访问](#2. 键盘可访问)
- [3. 图片替代文本](#3. 图片替代文本)
- [4. 表单可访问](#4. 表单可访问)
- [5. ARIA（必要时使用）](#5. ARIA（必要时使用）)
- [6. 可见的焦点（Focus）](#6. 可见的焦点（Focus）)
- [7. 响应式 & 缩放](#7. 响应式 & 缩放)
- [8. 动画控制](#8. 动画控制)
- [四、WCAG 2.1 新增点（相比 2.0）](#四、WCAG 2.1 新增点（相比 2.0）)
- 五、前端开发如何落地（实战建议）
-
- [1. 使用语义化标签](#1. 使用语义化标签)
- [2. 组件库选型](#2. 组件库选型)
- [3. 自动检测工具](#3. 自动检测工具)
- [4. 常见坑](#4. 常见坑)
- 六、总结
WCAG 2.1 AA 是由 World Wide Web Consortium（W3C）发布的网页无障碍标准中的一个"合规等级"，全称是：
Web Content Accessibility Guidelines 2.1 Level AA
它的核心目标是：让网站或应用对残障用户（如视障、听障、行动障碍等）也可访问、可使用。
一、WCAG 的整体结构
WCAG 2.1 基于四大原则（POUR）：
可感知（Perceivable）
用户必须能"看到或听到"内容。例如：
- 图片需要有 alt 文本
- 视频需要字幕
- 不能只靠颜色表达信息
可操作（Operable）
用户必须能操作界面。例如：
- 所有功能必须支持键盘操作
- 不要有闪烁内容（防止癫痫触发）
- 有清晰的焦点（focus）状态
可理解（Understandable）
用户能理解内容和操作。例如：
- 表单要有 label
- 错误提示要明确
- 页面行为要一致
健壮性（Robust）
兼容不同设备和辅助技术。例如：
- 使用语义化 HTML
- 支持屏幕阅读器
二、AA 等级意味着什么？
WCAG 有 3 个等级：
| 等级 | 含义 |
|---|---|
| A | 基础要求（最低） |
| AA | 推荐标准（主流合规要求） |
| AAA | 最严格（较少强制） |
AA 是大多数公司、政府、产品要求达到的标准
三、WCAG 2.1 AA 的关键要求（前端重点）
1. 对比度（最常见问题）
- 普通文本 ≥ 4.5:1
- 大文本 ≥ 3:1
2. 键盘可访问
- 所有交互（按钮、弹窗、菜单）必须支持
Tab操作 - 不能"卡住焦点"
3. 图片替代文本
html
<img src="xxx.jpg" alt="产品展示图">4. 表单可访问
html
<label for="email">邮箱</label>
<input id="email" />5. ARIA（必要时使用）
html
<button aria-label="关闭弹窗">X</button>6. 可见的焦点（Focus）
css
:focus {
outline: 2px solid blue;
}7. 响应式 & 缩放
- 页面放大到 200% 不影响使用
8. 动画控制
- 动画可以关闭（prefers-reduced-motion）
四、WCAG 2.1 新增点（相比 2.0）
重点是移动端和低视力用户：
- 支持触控操作（手势替代）
- 防止误触（pointer cancellation）
- 支持屏幕缩放
- 输入辅助（autocomplete）
五、前端开发如何落地（实战建议）
如果是做 React / 前端工程，这些是高性价比做法：
1. 使用语义化标签
html
<button> 而不是 div2. 组件库选型
优先选择支持无障碍的库，比如：
- Radix UI（无障碍优秀）
- shadcn/ui（基于 Radix）
3. 自动检测工具
- axe DevTools
- Lighthouse
4. 常见坑
- 用 div + onClick 代替 button
- modal 没有 focus trap
- tooltip 不能用键盘触发
- 颜色对比不够
六、总结
WCAG 2.1 AA = "让产品对所有人都可用"的行业标准基线