WCAG 2.2 设计检查的目标，是在进入开发前发现设计稿中可见、可操作和可理解的问题。UI 设计师重点检查对比度、焦点顺序、遮挡、目标尺寸、拖拽替代、表单提示和认证流程；最终符合性仍需设计、开发与测试共同验证。
W3C 发布的 WCAG 2.2 沿用可感知、可操作、可理解、健壮四项原则，并新增 9 条成功准则。本文把其中与设计阶段密切相关的要求转成执行清单；完整规范和例外条件应以 W3C 原文为准。
UI 设计师应该检查 WCAG 2.2 的哪些内容？
设计阶段先覆盖视觉呈现、键盘路径、输入方式、错误恢复和认知负担五类问题。代码语义、辅助技术朗读和动态更新通知无法只靠设计稿确认，应在标注中写清预期并交给开发与测试。
| 设计可直接检查 | 需要联合验证 |
|---|---|
| 颜色对比、文字缩放后的布局、焦点样式 | 语义标签、朗读顺序、状态通知 |
| 触控目标、拖拽替代、帮助入口一致性 | 完整键盘操作、焦点管理 |
| 标签、说明、错误和认证交互 | 浏览器、辅助技术与真实数据 |
如果需要基础概念和残障场景说明，可先阅读 无障碍设计规范入门。
文字、图标和控件对比度怎么检查？
普通文字至少 4.5:1，大号文字至少 3:1；有视觉边界或状态含义的非文字图形通常至少 3:1。不要只检查默认状态，还要覆盖悬停、禁用、选中、错误、深色模式和图片背景。
- 正文、按钮、标签、占位符和错误提示逐一检查。
- 输入框边界、焦点圈、图标和图表关键数据不能只靠低对比颜色。
- 状态不能只用红绿区分，应同时提供文字、图标或形状。
- 设计变量中记录前景与背景组合，避免只存单个颜色值。
焦点可见、焦点不被遮挡如何设计？
键盘焦点必须清楚可见，且元素获得焦点时不应被粘性导航、Cookie 条或浮层完全遮挡。WCAG 2.2 的“焦点不被遮挡（最低要求）”是 AA 级；更严格的焦点外观要求属于 AAA 级，不要混写。
- 为按钮、链接、输入框、菜单项和自定义控件提供焦点样式。
- 焦点顺序与视觉阅读顺序一致，弹窗打开后进入弹窗，关闭后返回触发点。
- 固定头部和底部操作条要为滚动到焦点的元素留出空间。
- 不要仅依赖颜色微变，焦点圈应有足够面积与对比。
WCAG 2.2 触控目标尺寸怎么做？
WCAG 2.2 的 AA 级“目标尺寸（最低要求）”通常要求目标至少为 24×24 CSS 像素，或通过目标间距等例外满足要求。设计时不应把例外当默认策略；移动端主要操作建议使用更宽松的点击区域。
- 图标按钮的可点击区域可以大于图标本身，并在标注中说明。
- 密集工具栏要检查相邻目标的间距，避免误触。
- 排序、滑块和画布拖拽必须提供不依赖拖拽的替代操作。
- 内联文字链接和用户代理控制等情况需按规范例外单独判断。
表单、错误提示和登录认证怎么检查？
字段要有持久标签，错误要说明原因与修复方法，重复填写的信息应尽可能自动填充或供用户选择。WCAG 2.2 还关注可访问认证：登录不应强迫用户完成纯记忆或复杂认知测试而没有替代方式。
- 占位符不能替代字段标签；必填、格式和单位要提前说明。
- 错误状态同时包含字段关联、文字说明和可见样式。
- 多步骤流程中已填写的信息避免要求用户再次输入，除非安全或必要例外适用。
- 允许密码管理器、复制粘贴，并提供验证码之外的可访问路径。
- 帮助入口在同一流程的不同页面保持相对一致。
动效、自动播放和内容呈现要注意什么？
动效要服务于理解，并允许用户暂停、关闭或减少非必要运动。不要让闪烁、自动轮播、视差或大幅缩放成为完成任务的前提。设计稿需要标注持续时间、触发方式、结束状态和减少动态效果时的替代。
- 信息不能只在悬停时出现，也要支持键盘聚焦和触控。
- 自动更新内容提供暂停或用户控制，避免打断阅读。
- 文字放大到 200% 或窄屏重排时，不应遮挡关键操作。
- 图片中的文字只用于确有必要的场景，并提供等价文本信息。
设计、开发和测试如何分工？
无障碍不是设计稿交付前的一次打勾，而是跨角色验收。设计师定义视觉、焦点和交互预期；开发者实现语义、键盘和状态通知；测试人员用键盘、放大、读屏和多浏览器验证。
| 角色 | 主要证据 |
|---|---|
| 设计 | 对比度结果、焦点顺序、状态稿、点击区域、交互说明 |
| 开发 | 语义结构、键盘行为、ARIA 使用、动态通知 |
| 测试 | 自动扫描、手动键盘、缩放、辅助技术与真实任务记录 |
| 产品/内容 | 简明文案、错误恢复、帮助与业务例外说明 |
如何在 Pixso 中建立无障碍检查流程？
把检查项变成组件状态、变量约束和评审清单，而不是散落在文档里。在 Pixso 设计系统 中统一文字/背景颜色组合、焦点样式、控件最小点击区和错误状态；在页面评审时逐项留证。
Pixso AI 可以辅助生成检查清单或发现待核对项，但 AI 结论不能替代人工验证。建议让 AI 返回“检查项、对象、证据、风险、待人工确认”五列，再由设计师和测试人员逐项确认。
WCAG 2.2 设计检查常见问题
通过自动对比度插件就符合 WCAG 2.2 了吗？
不够。自动工具只能覆盖部分规则，还要手动检查键盘、焦点遮挡、拖拽替代、表单理解、认证和辅助技术体验。
24×24 像素是不是所有按钮的最小视觉尺寸？
该成功准则针对可操作目标的 CSS 像素尺寸，并包含间距等例外。视觉图标可以更小，但可点击区域和相邻间距必须按规则验证。
禁用状态也必须达到文字对比度吗？
WCAG 对不活动组件有例外，但仍应保证用户能辨认状态，避免把大量关键信息做成难以阅读的低对比内容。
设计师能单独完成 WCAG 验收吗？
不能。设计师可提前解决大量视觉和交互问题，最终还需要开发实现与测试环境中的键盘、语义和辅助技术验证。
