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

无障碍设计的月度共读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 条与移动端触摸直接相关包括目标尺寸最小 24pxLevel AA、拖拽操作的替代方案、焦点不要被模态遮挡等。2026 年的浏览器和辅助技术已经全面支持 2.2没有理由还停留在 2.1。以下按照四大原则——可感知、可操作、可理解、健壮——逐条解读。二、核心 20 条标准速查三、高频标准实践代码!-- 1.1.1 非文本内容图片必须有 alt -- img srcchart.png alt2026年Q2销售额柱状图Q1 120万Q2 156万环比增长30% / !-- 1.3.1 信息和关系使用语义标签 -- nav aria-label主导航 ul lia href/dashboard仪表盘/a/li /ul /nav !-- 1.4.1 颜色使用颜色 文字 图标三重编码 -- div classform-error rolealert span aria-hiddentrue⚠️/span spanstrong错误/strong密码长度不能少于8位/span /div !-- 1.4.3 对比度文字 #212121 / 背景 #FFFFFF 15.3:1 ✓ -- p stylecolor: #212121; background: #FFFFFF;正文文字/p !-- 2.1.1 键盘所有交互元素可键盘操作 -- button typebutton onClick{handleClick} 点击我Enter/Space 自动支持 /button !-- 2.4.1 跳过块 -- a href#main-content classskip-link跳到主要内容/a !-- 2.4.7 焦点可见 -- style :focus-visible { outline: 3px solid #1976D2; outline-offset: 2px; } /style !-- 2.5.5 目标尺寸 -- button stylemin-width: 44px; min-height: 44px; 操作 /button !-- 3.3.1 错误识别 -- input aria-describedbyemail-error aria-invalidtrue / span idemail-error rolealert 请输入有效的邮箱地址 /span !-- 4.1.3 状态消息 -- div rolestatus aria-livepolite 搜索完成找到 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因为浏览器缩放是基于根字号的。如果根字号是 16px200% 缩放后等效 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级 24pxWCAG 2.2 将移动端触摸目标的最小尺寸从 AAA 级的 44px 下放到 AA 级的 24px。但实践中建议直接用 44pxiOS HIG 的标准因为 24px 在手指操作时仍然容易误触。具体参数min-width: 44px; min-height: 44px;对于图标按钮尤其重要——视觉上可能只有 24px 的图标但点击区域必须扩展到 44px可以用padding撑开。3.3.1 错误识别A级错误信息必须同时满足三个条件——描述错误内容邮箱格式不正确而非输入有误、定位错误位置aria-describedby关联到对应输入框、用rolealert让屏幕阅读器即时播报。4.1.3 状态消息AA级动态插入的 DOM 内容如搜索完成找到 23 个结果必须用aria-live通知辅助技术。aria-livepolite适用于非紧急消息等用户当前操作完成后再播报aria-liveassertive适用于紧急消息立即打断。大多数场景用polite就够了assertive会打断屏幕阅读器正在朗读的内容只在错误提示等真正紧急的场景使用。五、自动化检查覆盖率WCAG 2.2 的 86 条标准中可自动检测axe-core约 25 条29%需要半自动工具辅助 人工判断约 35 条41%必须人工检测约 26 条30%这意味着即使你配齐了 axe-core Lighthouse Pa11y 的自动化工具链也只能覆盖不到三分之一的合规要求。剩下的 71% 需要人工判断——对比度是否达标可以自动检测但颜色是否作为唯一信息编码需要人看页面alt文本是否存在可以自动检测但alt文本是否有意义需要人读内容。无障碍审计的本质是自动化排雷 人工精审两层缺一不可。六、总结WCAG 2.2 共 86 条标准约 20 条核心标准覆盖 90% 日常问题建议做成速查表贴在工位自动化检查覆盖率仅 29%必须配合人工审计无障碍没有一键合规的银弹颜色 文字 图标三重编码优于仅颜色编码这是信息设计的基本功焦点管理可见 顺序 跳过链接 不被遮挡是键盘可访问性的基础设施aria-live和rolealert是动态内容无障碍的关键注意polite与assertive的场景区分2026 年应该直接对标 WCAG 2.2而非停留在 2.1——新增的 9 条标准覆盖了移动端触摸的核心场景资料说明本文中的协议、版本、性能、成本和行业趋势应以可核验的一手资料为准。未标注统计口径的比例、时间表和预测仅作工程讨论不应视为行业事实。可参考 0731 资料来源索引并在发布前将具体来源贴到对应断言之后。量化口径文中用于说明的比例、费用、性能、时间和阈值如未紧邻给出公开来源、原始记录或测试条件均为示例参数、内部试点口径或待验证目标不应视为行业统计或可直接复用的生产结论。