当前位置：首页 > news >正文

无障碍设计的月度共读：WCAG 2.2 全部标准的逐一解读与实践

news 2026/8/1 2:38:41

无障碍设计的月度共读：WCAG 2.2 全部标准的逐一解读与实践

一、引子：WCAG 2.2 有 86 条标准，但日常能用到的就 20 条

美院第一年有一门基础课叫"色彩构成"，教材厚达 300 页，但老师第一节课就说："你们这辈子真正会反复用到的色彩原理不超过 20 条，剩下的都是变种。"WCAG 2.2 也是如此——86 条成功标准（Success Criteria）读下来，信息量巨大，但真正覆盖日常前端开发 90% 问题的，大约就是 20 条核心标准。这篇文章把这 20 条拎出来，每条配一段实践代码和具体的参数要求，做成一份可以贴在显示器旁边的速查表。

为什么是 WCAG 2.2 而不是 2.1？因为 2.2 在 2023 年 10 月正式成为 W3C 推荐标准，新增了 9 条标准（其中 4 条与移动端触摸直接相关），包括目标尺寸最小 24px（Level AA）、拖拽操作的替代方案、焦点不要被模态遮挡等。2026 年的浏览器和辅助技术已经全面支持 2.2，没有理由还停留在 2.1。以下按照四大原则——可感知、可操作、可理解、健壮——逐条解读。

二、核心 20 条标准速查

三、高频标准实践代码

<!-- 1.1.1 非文本内容：图片必须有 alt --> <img src="chart.png" alt="2026年Q2销售额柱状图：Q1 120万，Q2 156万，环比增长30%" /> <!-- 1.3.1 信息和关系：使用语义标签 --> <nav aria-label="主导航"> <ul> <li><a href="/dashboard">仪表盘</a></li> </ul> </nav> <!-- 1.4.1 颜色使用：颜色 + 文字 + 图标三重编码 --> <div class="form-error" role="alert"> <span aria-hidden="true">⚠️</span> <span><strong>错误：</strong>密码长度不能少于8位</span> </div> <!-- 1.4.3 对比度：文字 #212121 / 背景 #FFFFFF = 15.3:1 ✓ --> <p style="color: #212121; background: #FFFFFF;">正文文字</p> <!-- 2.1.1 键盘：所有交互元素可键盘操作 --> <button type="button" onClick={handleClick}> 点击我（Enter/Space 自动支持） </button> <!-- 2.4.1 跳过块 --> <a href="#main-content" class="skip-link">跳到主要内容</a> <!-- 2.4.7 焦点可见 --> <style> :focus-visible { outline: 3px solid #1976D2; outline-offset: 2px; } </style> <!-- 2.5.5 目标尺寸 --> <button style="min-width: 44px; min-height: 44px;"> 操作 </button> <!-- 3.3.1 错误识别 --> <input aria-describedby="email-error" aria-invalid="true" /> <span id="email-error" role="alert"> 请输入有效的邮箱地址 </span> <!-- 4.1.3 状态消息 --> <div role="status" aria-live="polite"> 搜索完成，找到 23 个结果 </div>

四、逐条解读与参数要求

1.1.1 非文本内容（A级）：所有<img>必须有alt属性。装饰性图片用alt=""，信息性图片用简洁描述。关键原则：alt 文本应该传达图片的"意义"而非"外观"。一张销售趋势图的 alt 不应该是"蓝色柱状图"，而应该是"Q2 销售额环比增长 30%"。

1.4.3 对比度最小（AA级）：正常文本对比度 ≥ 4.5:1，大文本（≥ 18px 常规或 ≥ 14px 粗体）≥ 3:1。实测参数：正文用#212121（不是纯黑#000，纯黑在白底上过于刺眼），背景#FFFFFF，对比度 15.3:1，远超 AA 要求。浅灰色辅助文本#757575对比度 4.6:1，刚好过线——如果再浅一档到#9E9E9E就只有 2.8:1，不达标。这种"刚好过线"的灰色是最容易踩坑的，建议在设计 Token 中直接锁定--color-text-secondary: #616161（对比度 7.3:1），给自己留余量。

1.4.4 文本缩放（AA级）：页面在 200% 缩放时不能丢失功能或内容。实操要点：所有布局用rem而非px，因为浏览器缩放是基于根字号的。如果根字号是 16px，200% 缩放后等效 32px，用rem的布局会等比放大，用px的不会。

2.4.7 焦点可见（AA级）：WCAG 2.2 新增了 2.4.11 焦点不被遮挡（AA级），要求焦点元素不能被 sticky header 或其他固定定位元素遮挡。建议的焦点样式参数：outline: 3px solid #1976D2; outline-offset: 2px;——3px 宽度在视觉上清晰可辨，2px 偏移确保轮廓不紧贴元素边缘。千万不要写outline: none然后不提供替代方案。

2.5.5 目标尺寸（AAA级，2.2 新增 2.5.8 为 AA级 24px）：WCAG 2.2 将移动端触摸目标的最小尺寸从 AAA 级的 44px 下放到 AA 级的 24px。但实践中建议直接用 44px（iOS HIG 的标准），因为 24px 在手指操作时仍然容易误触。具体参数：min-width: 44px; min-height: 44px;，对于图标按钮尤其重要——视觉上可能只有 24px 的图标，但点击区域必须扩展到 44px，可以用padding撑开。

3.3.1 错误识别（A级）：错误信息必须同时满足三个条件——描述错误内容（"邮箱格式不正确"而非"输入有误"）、定位错误位置（aria-describedby关联到对应输入框）、用role="alert"让屏幕阅读器即时播报。

4.1.3 状态消息（AA级）：动态插入的 DOM 内容（如"搜索完成，找到 23 个结果"）必须用aria-live通知辅助技术。aria-live="polite"适用于非紧急消息（等用户当前操作完成后再播报），aria-live="assertive"适用于紧急消息（立即打断）。大多数场景用polite就够了，assertive会打断屏幕阅读器正在朗读的内容，只在错误提示等真正紧急的场景使用。

五、自动化检查覆盖率

WCAG 2.2 的 86 条标准中：

可自动检测（axe-core）：约 25 条（29%）
需要半自动（工具辅助 + 人工判断）：约 35 条（41%）
必须人工检测：约 26 条（30%）

这意味着即使你配齐了 axe-core + Lighthouse + Pa11y 的自动化工具链，也只能覆盖不到三分之一的合规要求。剩下的 71% 需要人工判断——对比度是否达标可以自动检测，但"颜色是否作为唯一信息编码"需要人看页面；alt文本是否存在可以自动检测，但alt文本是否有意义需要人读内容。无障碍审计的本质是"自动化排雷 + 人工精审"，两层缺一不可。