WCAG 无障碍与视觉测试：为什么这两个领域不能再互相忽视
根据 W3C 的定义，网页无障碍意味着"设计和开发网站、工具和技术，使残障人士能够使用它们"（来源：W3C，Web Accessibility Initiative）。尽管这一定义非常广泛，但它在很大程度上依赖于视觉标准。颜色对比度、文字大小、键盘焦点可见性、元素间距——所有这些方面既是无障碍要求，也是可以通过视觉方式衡量的属性。
然而，大多数团队将无障碍和视觉测试视为两种独立的实践，由不同的人管理，使用不同的工具，在开发周期的不同阶段进行。
这是一个战略性的错误。视觉无障碍是可以自动测试的，而视觉测试是持续监控它的最自然的工具。
目录
- WCAG 在视觉方面的要求
- 为什么传统无障碍工具不够用
- 视觉测试作为无障碍的安全网
- 视觉测试原生检测的 WCAG 标准
- 如何建立视觉无障碍监控
- 常见问题
WCAG 在视觉方面的要求
WCAG（Web Content Accessibility Guidelines）2.2 版本包含 86 个成功标准，分为三个合规级别：A、AA 和 AAA。在这些标准中，有相当大的比例直接涉及界面的视觉外观。
让我们看看最重要的几个。
颜色对比度（标准 1.4.3 适用于 AA 级别，1.4.6 适用于 AAA）要求普通文本的最低对比度为 4.5:1，大号文本为 3:1。这一标准纯粹是视觉性的：通过比较文本颜色和背景颜色来验证。
文字大小（标准 1.4.4）要求内容可以放大到 200% 而不丢失信息或功能。这意味着在 200% 缩放下，文本不能溢出容器，元素不能重叠，信息必须保持可读。所有这些都可以通过视觉方式验证。
焦点指示器（标准 2.4.7 适用于 AA，在 WCAG 2.2 中由 2.4.11 和 2.4.12 加强）要求每个交互元素在获得键盘焦点时显示可见的指示器。该指示器必须具有足够的对比度和最小面积。这再一次是一个视觉标准。
文字间距（标准 1.4.12）要求当用户将行高修改为字体大小的 1.5 倍、段落间距修改为 2 倍、字母间距修改为 0.12 倍、词间距修改为 0.16 倍时，内容仍然保持功能正常。如果这些调整破坏了布局，这就是一个可以通过视觉检测到的无障碍违规。
内容重排（标准 1.4.10，也称为"reflow"）要求内容在 320 CSS 像素宽度下显示时无需水平滚动。这正是响应式测试所验证的内容。
结论很明确：WCAG 合规的很大一部分依赖于可测量的视觉属性。
为什么传统无障碍工具不够用
axe-core 或 Lighthouse 等无障碍审计工具是必不可少的。它们分析 DOM、检查 ARIA 属性、检测缺失标签并标记结构性违规。没有人质疑这一点。
但这些工具有一个根本性的局限：它们分析的是代码，而不是渲染结果。它们验证的是 HTML 和 CSS 声明的内容，而不是用户实际看到的内容。
一个具体的例子。想象一个按钮，白色文字在蓝色背景上，对比度为符合标准的 5.2:1。在一次 CSS 更新中，开发者将按钮的背景色改浅而没有改动文字。对比度降至 2.8:1。axe-core 在某些情况下可以检测到这一点，但只有在样式表被分析引擎正确解释的情况下才行。而视觉测试会立即捕获这一回归，因为它比较的是按钮修改前后的实际渲染效果。
另一个常见案例：焦点指示器在 CSS 中定义，但框架更新删除或覆盖了 outline 样式。功能上，按钮仍然可以点击。结构上，HTML 完好无损。但在视觉上，焦点已经消失了。没有 DOM 分析工具能可靠地标记这个问题。视觉测试则能检测到渲染差异。
这些工具也无法检测与缩放相关的问题。当用户将文本放大到 200% 时，溢出、重叠和截断的文本都是纯粹的视觉问题。它们不会出现在静态代码分析中。
传统无障碍工具是必要的，但不充分。它们覆盖了结构性标准（文本替代、标题结构、ARIA 角色），但在视觉渲染相关的一切方面留下了盲区。
视觉测试作为无障碍的安全网
自动化视觉测试通过捕获页面和组件的截图，然后将其与参考基线（baseline）进行比较来检测任何非预期的视觉变化。应用于无障碍领域，这一机制成为一道强大的安全网。
原因如下。
它检测回归，而不仅仅是违规。 无障碍审计告诉你网站在某一时刻是否合规。视觉测试则在代码更改降低视觉无障碍性时立即发出警报。这是诊断和警报系统之间的区别。
它基于实际渲染。 视觉测试捕获的是浏览器实际显示的内容，包括所有样式表、JavaScript 脚本和布局计算的结果。它不是在解释 CSS——而是在观察结果。
它覆盖多浏览器和多分辨率场景。 视觉无障碍问题因浏览器和屏幕尺寸而异。在 Chrome 中合规的对比度在 Safari 中可能不合规（如果字体渲染不同的话）。跨浏览器视觉测试能捕获这些差异。
它集成到 CI/CD 中。 通过在每个 pull request 上运行视觉测试，你可以在无障碍回归到达生产环境之前检测到它们。这是预防，而不是修复。
不需要无障碍专业知识即可设置。 团队中的任何成员都可以设置一个视觉测试，在不同的缩放级别或强制焦点样式下捕获页面。比较是自动完成的。
视觉测试原生检测的 WCAG 标准
让我们逐一看看视觉测试有效覆盖的 WCAG 方面。
标准 1.4.3 和 1.4.6 — 对比度。 通过将视觉测试与色盲模拟滤镜结合，或从截图中提取颜色，你可以验证每次修改后对比度是否仍然合规。任何降低对比度的调色板更改都会在截图比较中立即可见。
标准 1.4.4 — 文字调整大小。 在 200% 缩放下捕获页面。任何回归（截断的文本、重叠的元素、溢出的容器）都将被视觉比较检测到。
标准 1.4.10 — 重排。 在 320 CSS 像素宽度下捕获页面。响应式视觉测试验证内容是否正确适应且无需水平滚动。
标准 1.4.12 — 文字间距。 注入标准要求的间距样式（行高 1.5、段落间距 2 倍、字母 0.12em、词 0.16em）并捕获结果。与基线比较以检测在这些约束下断裂的元素。
标准 2.4.7、2.4.11、2.4.12 — 可见焦点。 在每个交互元素上强制键盘焦点并捕获结果。视觉测试检测焦点指示器的消失或退化。
标准 1.4.11 — 非文本对比度。 图标、表单字段边框、状态指示器——所有这些元素都必须具有至少 3:1 的对比度。视觉测试自然地监控它们。
如何建立视觉无障碍监控
实际实施依赖于几个简单的原则。
在无障碍条件下创建基线。 不要仅仅捕获页面的默认状态。创建额外的基线：200% 缩放、320 像素宽度、注入 WCAG 间距样式、在交互元素上强制焦点。
将这些测试集成到 CI/CD 管道中。 每个 pull request 都应在所有这些条件下触发视觉比较。如果 CSS 更改降低了视觉无障碍性，测试将阻止合并。
使用适当的容差阈值。 对于无障碍测试，降低可接受的差异阈值。焦点指示器上 2 像素的变化可能使其不合规。容差必须比一般视觉测试更严格。
记录无障碍基线。 每个基线都应与其验证的 WCAG 标准相关联。这有助于审计和在检查时的可追溯性。
与静态分析工具结合。 视觉测试不能替代 axe-core 或 Lighthouse。它是对它们的补充。将分析工具用于结构性标准（文本替代、标题结构、ARIA），将视觉测试用于渲染标准。两者结合几乎覆盖了所有 WCAG。
像 Delta-QA 这样的工具，允许无需编写代码即可配置视觉测试，使这种方法对整个团队都可用，包括那些不是开发人员的无障碍负责人。
视觉无障碍不是奢侈品——而是义务
自 2025 年 6 月起，欧洲无障碍法案（EAA）要求欧盟企业使其数字产品和服务具备无障碍性。在中国，《无障碍环境建设法》自 2023 年 9 月起实施，对网站和移动应用程序的无障碍提出了要求。
经济处罚已经存在且在增加。但除了法律风险之外，无障碍是一种竞争优势。根据世界卫生组织的数据，全球超过十亿人生活中伴有某种形式的残疾。忽视无障碍就是忽视一个庞大的市场。
视觉无障碍是这一义务中最容易自动化的部分。你不需要 WCAG 专家来在不同条件下捕获截图并比较结果。你需要的是一个配置良好的视觉测试工具。
常见问题
视觉测试能替代完整的 WCAG 无障碍审计吗？
不能。视觉测试覆盖 WCAG 的视觉标准（对比度、焦点、间距、缩放、重排），但不覆盖结构性标准如文本替代、键盘导航或 ARIA 角色。它补充审计，而不是替代审计。大约 30% 到 40% 的 WCAG 2.2 标准具有直接的视觉组成部分。
视觉测试有助于验证哪些 WCAG 合规级别？
视觉测试适用于所有三个级别：A、AA 和 AAA。AA 级别是法规最常要求的，包含几个主要的视觉标准（对比度 1.4.3、可见焦点 2.4.7、重排 1.4.10、间距 1.4.12）。AAA 级别加强了对比度要求（1.4.6 要求 7:1 的比率）并添加了额外的标准，全部可以通过视觉方式验证。
如何在没有技术技能的情况下测试视觉无障碍？
使用像 Delta-QA 这样的无代码工具，你可以配置要测试的页面，定义条件（屏幕大小、缩放、浏览器），工具会自动捕获和比较截图。不需要编写任何代码。界面会显示视觉差异，由你决定它们是否可以接受。
应该多久检查一次视觉无障碍？
每次前端代码更改时。CI/CD 集成是最佳方法：每个 pull request 自动触发测试。如果你无法在这个级别上自动化，每周测试是检测回归积累前的可接受最低标准。
视觉测试能检测移动端的无障碍问题吗？
可以，前提是你在常见的移动分辨率（360px、375px、414px 宽度）下配置测试。响应式视觉测试捕获每个分辨率下的实际渲染，并检测重排问题、截断文本、对于触摸激活来说太小的元素以及移动渲染导致的对比度降低。
欧洲无障碍法案适用于我的企业吗？
如果你向欧盟消费者销售数字产品或服务，是的。EAA 自 2025 年 6 月起适用于电子商务网站、银行服务、媒体、交通和电信等领域。员工少于 10 人且营业额低于 200 万欧元的微型企业可享受豁免，但其他企业必须合规。
结论
视觉无障碍和视觉测试是同一枚硬币的两面。最常被违反的 WCAG 标准（对比度、焦点、间距、缩放）都是可以自动测量的视觉属性。DOM 分析工具只覆盖了问题的一部分。视觉测试通过验证用户实际看到的内容来填补这一盲区。
与其将无障碍视为每年进行一次的审计，不如将视觉测试集成到你的管道中，使其成为持续监控。这更高效、更可靠，且比延迟修正的成本低得多。