WCAG 2.1 AA 检查清单：Shopify 独立站逐页自查

WCAG 2.1 AA 是什么

WCAG（Web Content Accessibility Guidelines）按四个原则组织：可感知、可操作、可理解、健壮。每条成功标准分 A、AA、AAA 三级。WCAG 2.1 一共 78 条，其中 A 级 30 条、AA 级 20 条。“达到 AA”指 A 级和 AA 级共 50 条全部满足，AAA 级不作要求。

WCAG 2.2 于 2023 年发布，新增了焦点不被遮挡、点击目标尺寸等条款。法律和标准目前多数还引用 2.1，建议先做到 2.1 AA，新项目顺手把 2.2 新增的条款一起做。

全站通用

• 页面声明了正确的语言（中文、英文、德文站各自不同）
• 每页有且只有一个一级标题，标题层级不跳级
• 有“跳到正文”链接，按 Tab 第一个就能到
• 按 Tab 键时焦点始终看得见，顺序和视觉顺序一致
• 文字对比度至少 4.5:1，大号文字至少 3:1
• 手机上没有禁止缩放，375 像素宽度下不需要横向滚动
• 所有图标按钮都有名称：搜索、购物车、账户、菜单、关闭

首页和导航

• 下拉菜单能用键盘打开和关闭
• 轮播图可以暂停，不会自动抢走焦点
• Banner 里的文字如果是图片，替代文字要写出图上的文字
• 订阅弹窗打开时焦点移进弹窗，按 Esc 能关，关闭后焦点回到原处

分类页

• 商品卡片的链接名称是商品名，不是“查看详情”
• 筛选和排序控件有标签，选中状态能被读出来
• “加载更多”或分页能用键盘操作，加载后焦点位置合理

商品页

• 每张商品图有替代文字，描述商品本身，不写文件名
• 尺码、颜色选择是真正的单选或下拉控件，有标签，选中状态能读出
• 数量框有标签，加减按钮有名称
• 价格变化、缺货、加购成功会以文字提示，并能被读屏软件播报
• 评价、问答等第三方应用组件同样要检查

购物车和结账

• 删除商品、修改数量的按钮有名称
• 优惠码输入框有标签，错误提示是文字并和输入框关联
• 表单错误不只用红色表示
• Shopify 的结账页由 Shopify 负责，自定义的结账扩展要自己检查

自动检测测不出来的

自动工具一般只能发现三到四成问题。下面这些要靠人：

• 替代文字写得对不对，比如把“图片1”当描述
• 读屏软件读出来的顺序和内容是否说得通
• 只用键盘能不能从首页一路完成下单
• 动态内容（加购提示、弹窗）有没有被播报
• 视频字幕和音频描述

可以先用我们的免费在线检测跑一遍，它会测首页、商品页、分类页，再按 30 次 Tab 键检查焦点。人工部分可以申请免费人工复测。