概念与标准
基于 WCAG 2.2 / WAI-ARIA 1.2 编写
速查
- WCAG 2.2：W3C Recommendation，初次定稿 2023-10-05；POUR 四原则；A / AA / AAA 三级，AA 通行（EN 301 549 / Section 508 / ADA 均引 AA）
- 2.2 vs 2.1：新增 9 条、移除 1 条（4.1.1 Parsing 标记 obsolete & removed）→ 总 86 条（⚠️ 慎用 87，那是漏减 4.1.1）
- WAI-ARIA 1.2：Recommendation（2023-06-06，当前版本，1.3 仍草案）；三类构件 roles / states / properties
- ARIA 第一法则：能用原生 HTML 语义就别用 ARIA；ARIA 最直接服务 WCAG 4.1.2 Name/Role/Value
- 自动化覆盖（双口径，分别署名）：GDS 约 30-40%（单工具/准则）、Deque 约 57%（问题实例）——约一半甚至更多仍需人工
- 只能人工：键盘可达 / 焦点可见 / 屏幕阅读器实测 / alt 是否「有意义」/ ARIA 语义是否正确 / 颜色是否唯一信息载体
WCAG 2.2
WCAG（Web Content Accessibility Guidelines）是 W3C 制定的 Web 内容可访问性指南，当前对标版本是 2.2，初次定稿（W3C Recommendation）于 2023-10-05（在线 spec 头部标注的 2024-12-12 是编辑性再发布，要求未变）。WCAG 3.0 仍处于 Working Draft，实践中仍以 2.2 为准。
POUR 四原则
WCAG 把所有要求归在四大原则下，首字母缩写 POUR：
| 原则 | 含义 | 典型准则 |
|---|---|---|
| Perceivable 可感知 | 信息要能被感官接收 | 1.1.1 非文本内容（alt）、1.4.3 对比度 |
| Operable 可操作 | 界面要能被操作 | 2.1.1 键盘、2.4.7 焦点可见 |
| Understandable 可理解 | 内容与操作可预期 | 3.3.7 冗余输入、3.3.8 可访问认证 |
| Robust 健壮 | 能被 AT 稳定解析 | 4.1.2 Name/Role/Value |
三个合规级别
- A：最低门槛，不满足会造成严重障碍。
- AA：法律与实践的通行目标——EN 301 549、Section 508、ADA 等法规均引用 AA。绝大多数项目以「达到 AA」为合规线。
- AAA：最高级别，不要求全站达成（部分准则在某些内容上不现实）。
2.2 相对 2.1 的变化（总 86 条）
WCAG 2.2 相对 2.1 新增 9 条、移除 1 条——移除的是 4.1.1 Parsing（被标记为 obsolete and removed，因现代浏览器已不再因标记错误而出问题）。
总数是 86 不是 87
2.1 的 SC 数 + 9 − 1 = 86 条。常见错误是只加 9 没减 1 写成 87——4.1.1 已被移除，正确总数是 86。
代表性新增准则：
| 准则 | 级别 | 一句话 |
|---|---|---|
| 2.4.11 Focus Not Obscured | AA | 获得焦点的元素不被遮挡 |
| 2.5.7 Dragging Movements | AA | 拖拽操作要有单指针替代 |
| 2.5.8 Target Size (Minimum) | AA | 目标尺寸 ≥ 24×24 CSS px |
| 3.3.7 Redundant Entry | A | 同一流程不重复要求输入相同信息 |
| 3.3.8 Accessible Authentication | AA | 认证不强制记忆 / 解谜 |
WAI-ARIA 1.2
WAI-ARIA（Accessible Rich Internet Applications）为动态组件补充语义，当前版本是 1.2（W3C Recommendation，2023-06-06；1.3 仍是草案）。它定义三类构件：
| 类别 | 作用 | 特点 | 例 |
|---|---|---|---|
| roles 角色 | 声明元素「是什么」 | 相对静态 | role="dialog"、role="tablist" |
| states 状态 | 描述当前状态 | 运行时高频变化 | aria-checked、aria-expanded |
| properties 属性 | 描述固有特性 | 较静态 | aria-label、aria-labelledby |
ARIA 第一法则
能用原生 HTML 语义就别用 ARIA。
<button> 优于 <div role="button">——原生元素自带角色、键盘行为、焦点管理，手写 ARIA 容易语法对但语义/交互不全。ARIA 最直接服务的是 WCAG 4.1.2 Name/Role/Value（每个 UI 组件都要有可被程序确定的名称、角色、值）。具体到 axe 规则的对应关系见 axe-core 引擎。
自动化测试的覆盖边界（双口径）
这是 a11y 测试最重要的认知：自动化只能覆盖一部分问题。业界有两个权威研究，口径不同、数字不同，必须分别署名，切勿合并成一个数字。
Deque（axe-core）约 57%
Deque 基于 2000+ 次审计 / 13000+ 页 / 约 30 万问题的研究得出：**57.38% 的问题「实例」**可被自动化命中。口径 = 按问题实例数。
GOV.UK / GDS 约 30-40%
英国政府数字服务（GDS）对 **143 个已知障碍的「最不可访问网页」**跑 10 个工具：最佳单工具命中 37%(Tenon) / 41%(Asqatasun)，29% 的障碍全部工具都漏检。口径 = 按单工具 / 准则。
安全的表述
「自动化只覆盖一部分——单工具/准则口径约 30-40%(GDS)，问题实例口径约 57%(Deque)；无论哪种，约一半甚至更多仍需人工。」
哪些只能人工测
工具能查「存在性」，查不了「质量 / 语义 / 体验」。以下只能人工：
| 维度 | 相关 SC | 为什么自动化不行 |
|---|---|---|
| 键盘可达 / 无陷阱 | 2.1.1 / 2.1.2 | 需真实键盘操作验证可达与可逃逸 |
| 焦点顺序 / 可见焦点 | 2.4.3 / 2.4.7 / 2.4.11 | 顺序是否合理、焦点是否可见需人眼判断 |
| 屏幕阅读器实际体验 | — | NVDA / JAWS / VoiceOver 朗读是否可懂 |
| 阅读顺序 | 1.3.2 | DOM 顺序与视觉顺序是否一致 |
| alt 是否「有意义」 | 1.1.1 | 工具只查 alt 存在，查不了内容是否描述图像 |
| 标题层级是否真描述 | 1.3.1 | 工具查层级跳级，查不了标题文字是否贴切 |
| ARIA 语义是否正确 | 4.1.2 | 语法对 ≠ 语义对，工具只查语法 |
| 颜色是否唯一信息载体 | 1.4.1 | 对比度数值可自动（1.4.3），但「是否只用颜色传达信息」不能 |
| 认知 / 可理解性 | 3.x | 内容是否易懂无法机器判断 |
对比度数值能自动，颜色「是否唯一载体」不能
注意区分：1.4.3 对比度的数值可以被 axe 自动计算（须在真浏览器层）；但 1.4.1 颜色是否是唯一信息载体（如表单只用红色标错误而无文字提示）只能人工判断。
金字塔定位
a11y 是横切关注点，可在单元 / 组件 / 集成 / E2E 各层跑 axe，向上延伸到人工 / AT 审计层。一句话定位：自动化是「地板」非「天花板」——它减少人工量，但永不替代人工。