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

面向 SaaS 的 WCAG 2.2 AA 检查清单：登录、表单、对话框、单页应用导航、表格、图表、拖放、超时，以及采购方要求的 ACR。

FixReports 编辑团队阅读约需 2 分钟

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

要点

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

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

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

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

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

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

  • 允许粘贴和使用密码管理器（3.3.8，AA 级）。 不要禁止在密码或验证码字段中粘贴，并使用 autocomplete="username"、autocomplete="current-password" 和 autocomplete="one-time-code"，让浏览器和密码管理器能够自动填写。
  • 不要把谜题作为唯一的登录方式。 要求用户转录扭曲文字或解答谜题的 CAPTCHA，属于认知功能测试。请提供替代方式，并优先采用不需要用户操作的验证（W3C （在新标签页中打开））。
  • 为每个字段加上标签（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 （在新标签页中打开）），而应用中的表单远比首页多。

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

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

自定义组件是键盘和屏幕阅读器支持最容易出问题的地方。WAI-ARIA 创作实践指南描述了每种模式应有的行为（W3C （在新标签页中打开））。

  • 对话框：打开时把焦点移入对话框，打开期间让 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 级）。深色模式要单独检查。我们的颜色对比度检测工具可以测试任意一组颜色。
  • 状态消息（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 （在新标签页中打开））。

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

  • 会话超时（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 （在新标签页中打开））。

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

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

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

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

常见问题

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

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

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

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

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

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

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

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

我们需要达到 AAA 级吗？

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

资料来源

全部指南