您的网站在 axe-core 审计中得到 100/100。然而，自上次 CSS 更新以来，您按钮的对比度已跌破法律阈值，焦点指示器也消失了——代码分析器看不见，但对用户和监管机构来说却真实存在。这正是传统无障碍工具的盲区：它们读取的是代码，而不是渲染结果。
而且风险不仅仅在于美观。无障碍网页义务因司法管辖区而异：欧盟通过《欧洲无障碍法案》（EAA）要求达到 AA 级别，美国在 ADA 框架下要求符合 Section 508，加拿大将《加拿大无障碍法案》（ACA）对齐 WCAG 2.1 AA，英国通过《平等法案》实施自己的规则。本指南比较了各区域的要求，详细介绍了完整 WCAG 测试的步骤，并解释了视觉测试如何补充静态分析工具以覆盖所有标准。
代码审计说"已合规"，但屏幕却讲述着另一个故事？ Delta-QA 能发现静态分析器看不到的对比度、焦点和布局偏差，在本地运行且无需注册。免费使用 Delta-QA →
目录
- WCAG 在视觉方面的要求
- 按区域的 WCAG 测试要求
- 如何进行完整的 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 合规的很大一部分依赖于可测量的视觉属性。
按区域的 WCAG 测试要求
各地区的数字无障碍法律义务因司法管辖区而异。下表比较了四个主要区域的要求。
| 区域 | 要求标准 | 强制 WCAG 级别 | 截止日期/年份 | 法律文本 | 推荐工具 |
|---|---|---|---|---|---|
| 欧盟 / EAA | EN 301 549（对齐 WCAG 2.1） | AA | 2025 年 6 月（生效） | European Accessibility Act (EAA) — Directive 2019/882 | axe-core, WAVE, Lighthouse |
| 美国 / ADA + Section 508 | Section 508（对齐 WCAG 2.0） | AA | Section 508：2018 年 1 月（更新）；ADA：持续判例 | ADA.gov — Section 508 (29 U.S.C. § 794d) | axe-core, ANDI, WAVE |
| 加拿大 / ACA | ACA（对齐 WCAG 2.1） | AA | 2024 年 6 月（第一阶段）；2025 年 6 月（第二阶段） | Accessible Canada Act (ACA) | axe-core, Accessibility Insights |
| 英国 / EQS | Public Sector Bodies Accessibility Regulations 2018 | AA | 2020 年 9 月（公共部门） | Equality Act 2010 — Accessibility Regulations | axe-core, WAVE, Pa11y |
表格要点：
- 四个司法管辖区均要求至少达到 WCAG AA 级别。没有任何一个强制要求 AAA，但达到 AAA 可降低法律风险。
- 欧盟的 EAA 截止日期最近且最具约束力，同时涵盖私营部门。
- 美国通过 Section 508 仍基于 WCAG 2.0，但法院在 ADA 框架下越来越多地将 WCAG 2.1 AA 作为参考标准。
- 加拿大和英国已对齐 WCAG 2.1 AA，实施时间表分阶段推进。
- axe-core 由 Deque Systems 开发，是所有司法管辖区中最常被引用的工具——它可集成到测试框架和 CI/CD 中。
如何进行完整的 WCAG 测试：步骤
完整的 WCAG 测试结合自动化分析、视觉验证和手动审计。按以下顺序执行。
- 确定测试范围。 识别需要测试的页面和组件、适用的司法管辖区（见上表）以及目标合规级别（几乎所有情况下为 AA）。
- 使用 axe-core 执行自动化分析。 在范围内的每个页面上运行 axe-core。该工具可检测约 30% 至 50% 的 WCAG 违规——即可通过 DOM 分析验证的违规（缺失文本替代、错误的 ARIA 角色、标题结构、表单属性）。
- 执行 Lighthouse 审计。 用 Google Lighthouse 补充 axe-core 分析，Lighthouse 会评估"Accessibility"类别的百分制评分，并标记常见问题及修复建议。
- 通过截图测试验证视觉标准。 在无障碍条件下捕获页面：200% 缩放、320 像素宽度、注入 WCAG 间距样式（标准 1.4.12）、强制键盘焦点。将结果与合规基线比较以检测回归。视觉回归测试是此步骤最可靠的方法。
- 手动测试键盘导航。 仅使用键盘（Tab、Shift+Tab、Enter、空格、方向键）浏览每个页面。验证 Tab 顺序是否合理、每个交互元素是否获得可见焦点、不存在键盘陷阱。
- 验证辅助技术兼容性。 使用屏幕阅读器（Windows 上的 NVDA、macOS/iOS 上的 VoiceOver、Android 上的 TalkBack）测试页面。验证内容是否正确播报、区域 landmark 是否存在、表单是否可用。
- 在多个浏览器和设备上测试。 无障碍问题因渲染引擎而异。在 Chrome 上合规的对比度在 Safari 上可能不合规。跨浏览器视觉测试可捕获这些差异。
- 记录结果和修复。 对于每项检测到的违规，记录相关 WCAG 标准、适用司法管辖区、严重程度和已应用的修复。此文档在检查时作为合规证据。
- 将测试集成到 CI/CD 管道中。 自动执行步骤 2、3 和 4，使其在每个 pull request 上运行。任何回归在上线前即被阻止。
- 规划定期审计。 即使完全自动化，仍建议由 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 合规，不必依赖云端审计工具 Delta-QA 桌面版免费、免注册，截图与对比数据全部留在本地，让你按区域核查可访问性视觉细节时数据不出公司。免费使用 Delta-QA →
视觉测试原生检测的 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）要求欧盟企业使其数字产品和服务具备无障碍性。在美国，ADA 和 Section 508 施加了类似的要求。在加拿大，加拿大无障碍法案正在逐步生效。在英国，Public Sector Bodies Accessibility Regulations 2018 自 2020 年起生效。在中国，《无障碍环境建设法》自 2023 年 9 月起实施，对网站和移动应用程序的无障碍提出了要求。
经济处罚已经存在且在增加。但除了法律风险之外，无障碍是一种竞争优势。根据世界卫生组织的数据，全球超过十亿人生活中伴有某种形式的残疾。在这种背景下，视觉 bug 的成本不仅仅是财务上的——它是一种排斥。
视觉无障碍是这一义务中最容易自动化的部分。你不需要 WCAG 专家来在不同条件下捕获截图并比较结果。你需要的是一个配置良好的视觉测试工具。
常见问题
如何按区域测试 WCAG 合规性？
首先确定适用于您产品的一个或多个司法管辖区（欧盟、美国、加拿大、英国或其他）。参考上方的比较表格了解所需标准和级别。使用 axe-core 运行自动化测试以检测结构性违规，通过自动化视觉测试（在 200% 缩放、320 像素宽度、强制焦点条件下截图）补充渲染标准检测，最后通过键盘和屏幕阅读器进行手动审计。记录每个结果及其司法管辖区参考。
WCAG 测试在欧盟是强制性的吗？
是的。《欧洲无障碍法案》（Directive 2019/882）自 2025 年 6 月起生效，要求符合 EN 301 549 标准，该标准本身对齐 WCAG 2.1 AA 级别。不合规将面临各成员国不同的国家制裁。范围涵盖面向消费者的数字产品和服务：电子商务、银行服务、交通、电信、媒体。
法律合规需要达到哪个 WCAG 级别？
四个主要司法管辖区（欧盟、美国、加拿大、英国）均要求 AA 级别。没有任何一个在法律上强制 AAA 级别，尽管某些 AAA 标准（特别是增强对比度 7:1）被推荐用于降低诉讼风险。实际上，以 WCAG 2.1 AA 为目标即可满足本指南中列出的所有区域的义务。
欧洲无障碍法案的截止日期是什么时候？
EAA 于 2019 年通过（Directive 2019/882），于 2025 年 6 月 28 日生效。企业须在该日期前合规。各成员国须将指令纳入本国法律——部分国家有所延迟，但义务独立于当地转化而适用。微型企业（少于 10 名员工且营业额低于 200 万欧元）享有豁免。
自动化 WCAG 测试工具有多准确？
根据 Deque Systems 和 W3C WAI 的研究，axe-core 等自动化工具可检测 30% 至 50% 的 WCAG 违规。它们有效覆盖结构性标准（文本替代、ARIA 角色、标题结构），但在视觉渲染标准和实际用户体验方面存在盲区。因此，完整的测试应结合自动化、视觉测试和手动审计。
视觉测试能替代完整的 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 测试要求了解每个司法管辖区的法律义务，将自动化分析与视觉测试相结合，并将这些检查集成到开发周期中。四个主要区域（欧盟、美国、加拿大、英国）均趋向 WCAG AA，但参考标准、截止日期和范围各不相同。自动化视觉测试通过验证实际渲染来弥补静态分析工具的盲区——用户看到的内容，而非代码声明的内容。
与其将无障碍视为每年进行一次的审计，不如将视觉测试集成到你的管道中，使其成为持续监控。这更高效、更可靠，且比延迟修正的成本低得多。
准备好把 WCAG 合规变成持续监控了吗？ 捕获第一个无障碍基线，让 Delta-QA 在上线前拦截每一处视觉回归，免费且无需注册。免费使用 Delta-QA →