# 面向 SaaS 产品和 Web 应用的 WCAG 2.2 AA 检查清单

<https://www.fixreports.com/zh/blog/wcag-2-2-checklist-saas-web-apps>

更新于 2026-10-26

SaaS 产品有两个需要做好无障碍的部分：用来销售产品的营销网站，以及人们每天使用的应用本身。营销网站出问题的方式与任何网站一样：对比度低、缺少替代文本、表单没有标签。应用则有它自己的问题：阻止密码管理器的登录流程、困住键盘焦点的对话框、屏幕阅读器察觉不到的单页应用导航、没有文字说明的数据表格和图表、没有替代方式的拖放操作，以及不加提醒就过期的会话。本检查清单按典型 SaaS 产品的各个组成部分，逐项梳理 WCAG 2.2 AA 级的要求。

**要点**

- WCAG 2.2 于 2023 年 10 月成为 W3C 推荐标准，新增了九项成功标准，其中六项属于 A 级或 AA 级（[W3C](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)）。
- 无障碍身份验证（3.3.8，AA 级）意味着，除非用户可以粘贴密码或使用密码管理器，否则登录不能依赖记住或转录密码（[W3C](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum)）。
- 可交互的目标必须至少为 24 × 24 CSS 像素，或者周围留有足够的空间（2.5.8，AA 级）（[W3C](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)）。
- “已保存”或“3 条结果”这类消息，必须在不移动焦点的情况下传达给屏幕阅读器（4.1.3，AA 级）（[W3C](https://www.w3.org/WAI/WCAG22/Understanding/status-messages)）。
- 企业和公共部门的采购方经常要求提供无障碍符合性报告（ACR），这类报告通常使用信息技术产业理事会（ITI）的 VPAT 模板编写（[ITI](https://www.itic.org/policy/accessibility/vpat)）。

## 为什么无障碍对 SaaS 比对宣传型网站更重要？

人们使用 SaaS 产品，一用就是几个小时，而且往往是因为雇主选择了它。营销页面上的一个障碍会让您失去一位访客；产品中的一个障碍，则可能让某人无法完成工作。正因如此，越来越多的大客户、大学和公共机构会在购买前询问无障碍情况，而答复需要涵盖应用本身，而不只是网站。

另一个原因是，自动化测试只能发现部分问题。axe-core 等工具能发现标记中的问题，例如缺少标签和对比度低。但它们无法判断对话框是否把焦点送回正确的位置、图表的数据是否能以文字形式获取，或者某个工作流程能否只用键盘完成。应用既需要自动化检查，也需要人工测试。

## 如何让注册和登录无障碍？

身份验证是 WCAG 2.2 为 SaaS 新增最重要要求的地方。

- **允许粘贴和使用密码管理器（3.3.8，AA 级）。** 不要禁止在密码或验证码字段中粘贴，并使用 `autocomplete="username"`、`autocomplete="current-password"` 和 `autocomplete="one-time-code"`，让浏览器和密码管理器能够自动填写。
- **不要把谜题作为唯一的登录方式。** 要求用户转录扭曲文字或解答谜题的 CAPTCHA，属于认知功能测试。请提供替代方式，并优先采用不需要用户操作的验证（[W3C](https://www.w3.org/TR/turingtest/)）。
- **为每个字段加上标签（1.3.1 和 3.3.2，A 级）。** 使用与输入框关联的可见 `<label>`；占位符文字在用户输入时就会消失，不能充当标签。
- **用文字指出错误（3.3.1，A 级）并给出修改建议（3.3.3，AA 级）。** “密码至少需要 12 个字符”很有帮助；只有一个红色边框则没有。
- **不要重复询问（3.3.7，A 级）。** 如果多步骤注册流程已经询问过公司名称或地址，请自动填入，或让用户直接选择，而不是重新输入。
- **把帮助放在相同的位置（3.2.6，A 级）。** 如果您提供在线聊天、帮助链接或联系方式，请在流程的每个页面上把它们放在相同的相对位置。

## 哪些表单和错误处理模式造成的问题最多？

应用中的大多数问题都出在表单上。WebAIM 在 2026 年对一百万个网站首页进行的调查发现，51% 的首页存在缺少表单标签的问题（[WebAIM](https://webaim.org/projects/million/)），而应用中的表单远比首页多。

- 为每个输入框提供可编程识别的名称，并用 `<fieldset>` 和 `<legend>` 把单选按钮等相关控件编为一组。
- 在用户能注意到的地方告知错误：把焦点移到表单顶部的错误摘要或第一个无效字段，并让摘要中的每一项都链接到对应的字段。
- 用文字标明必填字段，不要只依靠颜色（1.4.1，A 级）。
- 用户只是选择了某个选项时，不要提交表单或改变上下文（3.2.2，A 级）；应等待用户明确操作。

## 对话框、菜单和弹出层应该如何运作？

自定义组件是键盘和屏幕阅读器支持最容易出问题的地方。WAI-ARIA 创作实践指南描述了每种模式应有的行为（[W3C](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)）。

- **对话框**：打开时把焦点移入对话框，打开期间让 Tab 键停留在对话框内，按 Escape 键关闭，并把焦点送回打开它的控件。使用原生 `<dialog>` 元素，或带有 `aria-modal="true"` 和名称的 `role="dialog"`。
- **无键盘陷阱（2.1.2，A 级）**：每个组件都必须能用键盘离开。
- **焦点可见（2.4.7，AA 级）**，并且焦点不会被固定页头、Cookie 横幅或聊天插件遮住（2.4.11，AA 级，2.2 新增）。
- **提示框和弹出层（1.4.13，AA 级）**：用户可以按 Escape 键关闭，鼠标移到上面时不会消失，并且在被关闭之前一直保持显示。
- **单键快捷键（2.1.4，A 级）**：如果按一个字母键就会触发操作，请让用户能够关闭或重新映射快捷键，或者只在相关组件获得焦点时才启用。

## 单页应用中的导航应该如何处理？

在单页应用中，网址会在不重新加载页面的情况下改变，因此屏幕阅读器可能不会播报任何变化。

- 每次路由变化时更新文档标题，让每个视图都有描述性的标题（2.4.2，A 级）。
- 把焦点移到新视图的主标题，或在 polite 实时区域中播报变化；Next.js 等框架为此内置了路由播报器。
- 保持合理的焦点顺序（2.4.3，A 级）：删除一个项目后，焦点应移到合适的相邻项目，而不是回到页面顶部。
- 提供跳过重复导航的方式（2.4.1，A 级），例如跳转链接或地标。

## 如何让仪表板、数据表格和图表无障碍？

- **表格**：使用真正的 `<table>` 标记，用 `<th>` 和 `scope` 标示表头，并添加表格标题（1.3.1，A 级）。用 `<div>` 元素搭建的网格需要完整的 ARIA 网格模式，要做对困难得多。
- **图表**：为每个图表提供说明主要结论的文本替代，并以表格形式提供数据（1.1.1，A 级）。不要只靠颜色区分数据系列（1.4.1，A 级）；请添加标签或图案。
- **对比度**：文字需要 4.5:1（1.4.3，AA 级），图表线条、图标和输入框边框与背景之间需要 3:1（1.4.11，AA 级）。深色模式要单独检查。我们的[颜色对比度检测工具](/zh/color-contrast-checker)可以测试任意一组颜色。
- **状态消息（4.1.3，AA 级）**：“已保存”“上传完成”和结果数量应使用 `role="status"` 或实时区域，让屏幕阅读器用户听到消息，同时不会丢失当前位置。

## WCAG 2.2 的新标准对 Web 应用有哪些改变？

| 标准 | 级别 | 在应用中意味着什么 |
|---|---|---|
| 2.4.11 焦点不被遮挡（最低） | AA | 固定工具栏、横幅和聊天插件不得完全遮住获得焦点的元素 |
| 2.5.7 拖动动作 | AA | 任何通过拖动完成的操作（例如重新排列看板）都需要单指针的替代方式，例如菜单或上移、下移按钮 |
| 2.5.8 目标尺寸（最低） | AA | 按钮和链接至少为 24 × 24 CSS 像素，或者间距足够大，使以每个目标为中心的 24 像素圆不会与其他目标重叠 |
| 3.2.6 一致的帮助 | A | 帮助链接、在线聊天和联系方式在每个页面上处于相同的相对位置 |
| 3.3.7 冗余输入 | A | 在同一流程中已经输入过的信息会自动填入，或可供选择 |
| 3.3.8 无障碍身份验证（最低） | AA | 登录无需记忆或转录，除非允许粘贴、使用密码管理器或其他方法 |

WCAG 2.2 还删除了 4.1.1 解析，因为它对无障碍已不再有实际影响（[W3C](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)）。

## 超时、布局和缩放方面要注意什么？

- **会话超时（2.2.1，A 级）**：在会话过期之前提醒用户，并允许用户通过简单的操作延长时间，除非该时限必不可少或超过 20 小时。自动保存进行中的工作，可以避免最糟糕的结果。
- **重排（1.4.10，AA 级）**：内容在 320 CSS 像素宽度下（相当于在 1280 像素宽的屏幕上放大到 400%）必须可用，且无需在两个方向上滚动；数据表格等内容不受此限。
- **文本间距（1.4.12，AA 级）**：增大行高和字间距不应导致文字被截断，而固定高度的容器常常会造成这种情况。
- **屏幕方向（1.3.4，AA 级）**：除非必不可少，否则不要把应用锁定为纵向或横向。

## 什么是 ACR？您需要吗？

无障碍符合性报告（ACR）记录产品对每项无障碍标准的满足情况：支持、部分支持或不支持，并附有说明。大多数 ACR 使用信息技术产业理事会发布的 VPAT 模板编写，该模板有分别对应 WCAG、美国第 508 条款标准和欧洲标准 EN 301 549 的版本（[ITI](https://www.itic.org/policy/accessibility/vpat)）。

美国联邦机构必须依据第 508 条款采购无障碍的技术产品（[Section508.gov](https://www.section508.gov/)），欧盟公共机构则参照 EN 301 549，因此面向这些客户销售的 B2B 产品，经常会在采购过程中被要求提供 ACR。一份如实列出已知不足的 ACR，比一份声称完全支持的 ACR 对采购方更有用。ACR 应基于对产品的测试，包括人工测试；仅靠自动化扫描无法完成。

如果您面向欧盟消费者销售，《欧洲无障碍法案》可能也适用于您的在线销售方式；我们的[《欧洲无障碍法案》指南](/zh/blog/european-accessibility-act-online-stores)介绍了它的适用范围。本文不构成法律建议。

## SaaS 团队应该如何测试无障碍？

1. **把基础检查自动化。** 在端到端测试和营销网站上运行 axe-core 或类似的引擎，出现新的违规时让构建失败。我们的[免费网站无障碍检测工具](/zh/website-accessibility-checker)会在任何公开页面上运行同一个引擎。
2. **用键盘测试。** 只用 Tab、Shift+Tab、Enter、空格、Escape 和方向键，完成注册、创建记录和更改设置等主要工作流程。
3. **用屏幕阅读器测试。** Windows 上的 NVDA 以及 macOS 和 iOS 上的 VoiceOver 都是免费的。检查名称、角色、状态和消息是否都能被播报。
4. **缩放和调整窗口大小。** 检查 200% 文字缩放和 320 像素宽的窗口。
5. **在设计系统中修复。** 大多数问题都来自共用组件；一个按钮或对话框修复一次，所有用到它的地方就都修好了。

## 常见问题

### WCAG 适用于 Web 应用中需要登录的部分吗？

WCAG 适用于任何网页内容，包括需要登录才能访问的页面。法律是否要求某款具体产品符合 WCAG，取决于司法管辖区和客户，但询问无障碍情况的采购方，通常指的是整个产品。

### 覆盖层插件能让 SaaS 产品变得无障碍吗？

不能。覆盖层插件不会改变自定义组件的底层代码，而应用的问题恰恰出在那里。我们关于[无障碍覆盖层插件](/zh/blog/accessibility-overlays-ftc-order)的指南介绍了 FTC 对一家主要覆盖层供应商采取的行动。

### 自动化工具能检查 WCAG 的多少内容？

只能检查一部分。自动化规则能可靠地发现缺少名称、缺少标签和对比度不足等问题，但许多标准，例如有意义的焦点顺序、有用的替代文本和易于理解的错误消息，都需要由人来判断。

### 我们应该以哪个 WCAG 版本为目标？

WCAG 2.2 AA 级是当前版本。许多法律和采购规定仍引用 WCAG 2.1 AA；除已删除的“解析”标准外，符合 2.2 AA 也就符合 2.1 AA。

### 我们需要达到 AAA 级吗？

W3C 不建议要求整个产品达到 AAA 级，因为有些内容无法满足所有 AAA 级标准。AA 级是通常的目标。

## 资料来源

- W3C：[WCAG 2.2 新增内容](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)
- W3C：[Web 内容无障碍指南（WCAG）2.2](https://www.w3.org/TR/WCAG22/)
- W3C：[理解 3.3.8 无障碍身份验证（最低）](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum)
- W3C：[理解 2.5.8 目标尺寸（最低）](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- W3C：[理解 4.1.3 状态消息](https://www.w3.org/WAI/WCAG22/Understanding/status-messages)
- W3C：[ARIA 创作实践指南：对话框（模态）模式](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
- W3C：[CAPTCHA 的不可访问性](https://www.w3.org/TR/turingtest/)
- ITI：[自愿性产品无障碍模板（VPAT）](https://www.itic.org/policy/accessibility/vpat)
- GSA：[Section508.gov](https://www.section508.gov/)
- WebAIM：[The WebAIM Million (2026)](https://webaim.org/projects/million/)