WCAG 2.2 AA 网店无障碍检查清单：按页面类型逐项自查

面向 Shopify 和 WooCommerce 网店、按页面类型整理的 WCAG 2.2 AA 无障碍检查清单：替代文本、对比度、标签、键盘、焦点、目标尺寸及 2.2 新增标准。

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

网店的 WCAG 2.2 AA 检查清单，要从大多数店铺模板中都存在的问题入手：缺少替代文本、文字对比度不足、链接和按钮没有可访问名称、表单字段没有标签、键盘陷阱，以及看不见的焦点。在此基础上，WCAG 2.2 又新增了几项对网店影响很大的 AA 级检查：获得焦点的元素被固定栏遮住（2.4.11）、点击目标小于 24 × 24 CSS 像素（2.5.8），以及要求用户记住或重新输入内容的登录方式（3.3.8）。请用键盘和自动化检测工具逐一测试每种页面类型（首页、分类页、产品页、购物车），然后修改主题模板，让每个页面都能继承修复结果。

要点

  • WCAG 2.2 于 2023 年 10 月 5 日成为 W3C 推荐标准。当前版本的日期为 2024 年 12 月 12 日，并已被批准为 ISO/IEC 40500:2025 （在新标签页中打开）。
  • 在 WebAIM Million 2026 （在新标签页中打开）（2026 年 2 月数据）中，排名前一百万的网站首页中，有 95.9% 存在可检测到的 WCAG 2 不合规问题。
  • 最常见的六类问题依次是：文字对比度低（83.9% 的页面）、缺少替代文本（53.1%）、缺少表单标签（51%）、空链接（46.3%）、空按钮（30.6%）和未声明页面语言（13.5%）。
  • 该样本中的 42,516 个 Shopify 首页平均检测出 75.1 个错误，而全部页面的平均值为 56.1 个。
  • WCAG 2.2 新增了四项 AA 级标准（2.4.11、2.5.7、2.5.8、3.3.8）和两项 A 级标准（3.2.6、3.3.7），并删除了 4.1.1 解析。

WCAG 2.2 对网店来说有哪些变化？

WCAG 2.2 新增了九项成功标准，其中六项属于 A 级或 AA 级，并将 4.1.1 解析作为过时标准删除（W3C WAI （在新标签页中打开））。

新增标准级别对网店意味着什么
2.4.11 焦点不被遮挡（最低）AA获得焦点的链接或按钮不得被固定页头、固定的“加入购物车”栏、Cookie 横幅或聊天插件完全遮住
2.5.7 拖动动作AA任何需要拖动的操作（例如价格区间滑块）都需要提供只需点按一次即可完成的替代方式
2.5.8 目标尺寸（最低）AA点击和触摸目标至少为 24 × 24 CSS 像素，或者间距足够大，使以每个目标为中心的 24 px 圆不会碰到相邻目标
3.2.6 一致的帮助A帮助链接、联系方式或在线聊天在每个页面上以相同的相对顺序出现
3.3.7 冗余输入A在同一流程中不要两次索要相同的信息；应自动填充，或让用户直接选择
3.3.8 无障碍身份验证（最低）AA登录不得依赖记忆或转录，除非提供替代方式或辅助手段，例如允许粘贴和使用密码管理器

其余三项（2.4.12、2.4.13 和 3.3.9）属于 AAA 级。由于 2.2 保留了 2.1 中除 4.1.1 以外的所有标准，符合 2.2 AA 也就同时满足了 2.1 AA。

店铺模板最常不符合哪些 WCAG 标准？

每年出现的都是那几项：对比度、替代文本、表单标签、链接和按钮的名称，以及自动化工具只能部分发现的键盘和焦点问题。

标准网店中常见的问题修复方法
1.1.1 非文本内容（A 级）产品图片没有替代文本，或以文件名作为替代文本；带链接的图片没有文字描述所展示的产品（颜色、款式、角度）。只有装饰性图片才使用 alt=""。Shopify 主题应输出 image.alt
1.4.3 对比度（最低）（AA 级）浅灰色正文、占位符文字、促销角标、首屏大图上的文字普通文字 4.5:1，大号文字 3:1（约 24 px，或 18.5 px 粗体）（W3C （在新标签页中打开））
2.4.4 链接目的（A 级）、4.1.2 名称、角色、值（A 级）只有图标的购物车、搜索和社交媒体链接；轮播图箭头；没有名称的“X”关闭按钮为每个控件提供可见文字或 aria-label，例如“购物车，2 件商品”
1.3.1 信息和关系（A 级）、3.3.2 标签或说明（A 级）只有占位符文字的订阅和搜索输入框；没有标签的数量输入框使用与输入框 id 对应的 <label for>；把单选色块放进带 legend 的 fieldset 中分组
2.1.1 键盘（A 级）、2.1.2 无键盘陷阱（A 级）只能靠鼠标悬停展开的菜单、用 div 搭建的色块、无法用键盘关闭的弹窗使用真正的 button 和 a 元素；按 Escape 键关闭浮层并让焦点回到原处
2.4.7 焦点可见（AA 级）主题 CSS 中写了 outline: none添加一个与背景形成明显反差的 :focus-visible 样式

WebAIM 还发现，每四张带链接的图片中就有一张没有替代文本，而在缺少替代文本的图片中，有 45% 是链接（WebAIM （在新标签页中打开））。在分类页的商品网格中，这通常就是产品图片上的链接。

首页应该检查什么？

检查页头、首屏大图区域以及所有弹出内容，因为每位访客最先接触的就是它们。

  • 跳转链接。 第一个可获得焦点的元素是“跳到主要内容”链接（2.4.1 绕过区块，A 级）。
  • 页头图标。 搜索、账户和购物车图标都有可访问名称，并且购物车的名称包含商品数量。
  • 菜单。 可以用 Enter 或空格键打开，子菜单项可以用 Tab 键访问，按 Escape 键可以关闭，并且不依赖鼠标悬停（2.1.1）。Shopify 的主题商店要求 （在新标签页中打开）规定，页面的所有部分（包括下拉菜单）都必须能用键盘操作。
  • 首屏轮播图。 如果幻灯片自动播放超过五秒，请提供暂停控件（2.2.2 暂停、停止、隐藏，A 级）。
  • 公告栏和图片上的文字。 测量对比度；品牌色常常达不到 4.5:1。
  • 弹窗和 Cookie 横幅。 把焦点移入弹窗，为邮箱输入框加上标签，允许按 Escape 键关闭，并确保固定横幅绝不会完全遮住获得焦点的元素（2.4.11）。W3C 列出了 CSS 的 scroll-padding，作为让获得焦点的元素不被固定栏遮挡的方法之一（W3C （在新标签页中打开））。
  • 页面语言。 html 元素带有正确的 lang 属性（3.1.1 页面语言，A 级）。

分类页应该检查什么？

分类页的问题通常出在商品卡片、筛选器和色块上。

  • 商品卡片。 图片链接有替代文本，或者图片对辅助技术隐藏、由标题链接承载商品名称。
  • 筛选器。 每个复选框都有标签，每组都有标题或 legend。筛选抽屉可以用键盘打开、操作和关闭。以状态消息的形式播报更新后的结果数量（4.1.3 状态消息，AA 级）。
  • 价格滑块。 添加最低价和最高价的数字输入框，让筛选无需拖动（2.5.7）、也无需鼠标（2.1.1）即可使用。
  • 颜色色块。 每个色块都有文字名称，“已售罄”不能只用颜色来表示（1.4.1 颜色的使用，A 级）。色块尺寸达到 24 × 24 CSS 像素，或符合间距规则（2.5.8）。
  • 排序和分页。 排序下拉菜单有标签；页码链接和“加载更多”按钮符合目标尺寸要求。

产品页应该检查什么？

产品页承载着购买决定，因此请测试从产品图片到“加入购物车”按钮之间的每一个控件。

  • 图片库。 每张图片都有替代文本，缩略图是带名称的按钮（例如“显示第 2 张图片”），箭头无需拖动即可使用（2.5.7）。
  • 规格选择器。 尺码和颜色选项放在带标签的分组中（1.3.1），屏幕阅读器能获知当前选中的选项（4.1.2），缺货的尺码用文字标明。
  • 数量。 输入框有标签，减号和加号按钮有名称且符合 2.5.8。Shopify 主题商店现在要求触摸目标至少为 24 × 24 CSS 像素，其无障碍最佳实践 （在新标签页中打开）则建议主要控件采用 44 × 44。
  • 加入购物车。 成功和错误消息都会被播报（4.1.3）。FTC 在针对一家无障碍浮层（overlay）供应商的起诉书中提到一个网站：屏幕阅读器没有播报商品已加入购物车，而一个 5 星评分图形被读成了“previous”（上一个）按钮（FTC 起诉书 （在新标签页中打开））。
  • 评分、选项卡和折叠面板。 评分配有文字，例如“4.5 星（满分 5 星）”。折叠面板会告知自己是否已展开。
  • 固定的“加入购物车”栏。 键盘用户用 Tab 键向下浏览页面时，它不得完全遮住获得焦点的元素（2.4.11）。
  • 视频。 带有语音的产品视频配有字幕（1.2.2 字幕（预录），A 级）。

购物车和登录环节应该检查什么？

购物车是大多数主题能够完全控制的最后一个页面，因此请一直测试到结账按钮，然后检查账户登录是否不依赖记忆或重新输入。

  • 购物车抽屉。 焦点移入抽屉，在抽屉打开期间保持在其中，按 Escape 键关闭后回到购物车按钮，正如 Shopify 最佳实践所描述的那样。
  • 商品条目。 每个数量输入框都以产品名称作为标签，每个移除按钮都说明要移除的是什么，例如“移除亚麻衬衫，M 码”。
  • 优惠码和备注字段。 带有标签，并用文字描述错误（3.3.1 错误识别，A 级）。
  • 结账按钮。 可以用 Tab 键访问，获得焦点时清晰可见，并且不会被固定元素遮挡。
  • 登录（3.3.8）。 Shopify 的客户账户默认使用一次性验证码免密码登录 （在新标签页中打开）。W3C 指出，验证码必须可以粘贴或自动填充，禁止粘贴或禁用密码管理器则不符合该标准；在 AA 级下允许使用物体识别类 CAPTCHA，但拼图或算术类 CAPTCHA 需要提供其他方式（W3C （在新标签页中打开））。

这里的平台差异很重要。在 Shopify 上，信息、配送和付款步骤已不再支持 （在新标签页中打开） checkout.liquid，因此结账页的大部分代码来自 Shopify 而不是您的主题；请测试您添加的结账应用和自定义内容。在 WooCommerce 上，结账页是您 WordPress 网站中的一个页面。WooCommerce 表示其核心前端基本符合 WCAG 2.2 AA（声明最后更新于 2025 年 4 月 1 日），但您的主题和插件仍可能破坏这一点（WooCommerce （在新标签页中打开））。

如何按照这份清单测试网店？

在每种页面类型上，把自动化扫描、纯键盘购物流程和简短的屏幕阅读器检查结合起来。

  1. 自动化扫描。 axe、WAVE 或 Lighthouse 等工具可以发现对比度、替代文本、标签和空链接问题。Shopify 主题商店要求首页、分类页和产品页的 Lighthouse 无障碍平均得分至少为 90。这只是底线，并不等于符合标准：W3C 指出，工具无法单独判定无障碍水平 （在新标签页中打开）。
  2. 纯键盘购物。 不用鼠标，从首页通过菜单或搜索找到一件产品，进行筛选，选择规格，加入购物车，打开购物车，并到达结账按钮。
  3. 屏幕阅读器抽查。 用 VoiceOver 或 NVDA 收听产品名称、价格、规格状态和加入购物车后的确认提示。
  4. 修改后重新测试。 主题更新和新安装的应用可能会让修复失效。

我们的免费扫描使用真实的 Chromium 和 axe-core，在首页、分类页、产品页、购物车和内容页上完成第 1 步。无障碍修复报告最多测试 25 个页面，把第 2 步作为纯键盘购物测试一直执行到结账按钮，提供修改前后的代码，并附有第 3 步的检查清单，这一步需要由人使用屏幕阅读器完成。两者都不能保证符合 ADA 或 WCAG。

常见问题

美国的网店在法律上必须符合 WCAG 2.2 吗？

美国司法部没有为私营企业制定规定网页标准的 ADA（《美国残疾人法案》）法规，其 2022 年网页指南 （在新标签页中打开）将 WCAG 列为有帮助的参考。律师函（demand letter）通常援引 WCAG 2.1 或 2.2 AA，因此关于您的具体义务，请咨询律师。

符合 WCAG 2.2 AA 是否也就符合 WCAG 2.1 AA？

从实际情况来看，是的。WCAG 2.2 保留了 WCAG 2.1 的所有成功标准，只有 4.1.1 解析除外，W3C 已将其作为过时标准删除。

WCAG 2.2 规定的最小目标尺寸是多少？

根据 2.5.8，目标至少为 24 × 24 CSS 像素；如果以每个较小目标为中心的 24 px 圆不会碰到其他目标或它们的圆，则不受此限。句子中的链接、未设置样式的浏览器原生控件、必不可少的呈现方式，以及另有符合要求的等效控件的目标，均不适用这一要求。

Lighthouse 无障碍得分 100 分是否意味着我的网店符合标准？

不是。自动化工具只能检测出部分问题，WebAIM 也指出，没有检测到错误并不代表页面就是无障碍的或符合标准的。

使用密码登录是否不符合 3.3.8？

不会仅因此不符合。只要用户可以向密码字段粘贴内容并使用密码管理器，就符合该标准；禁止粘贴或自动填充才会导致不符合。

我应该多久重新测试一次网店？

每次主题更新、安装新应用或对模板做较大修改后都要重新测试，并定期抽查购物流程，因为应用可能会在没有任何提示的情况下插入新的代码。

参考资料

全部指南