Shopify 主题无障碍要求有哪些？对照 WCAG 的店铺自查清单

做外贸独立站的团队，讨论 Shopify 主题时通常先看视觉和转化，很少把「无障碍」放进需求清单。但对面向海外消费者的店铺来说，看不清的按钮、只能用鼠标打开的菜单、没有标签的输入框，会直接把一部分顾客挡在下单流程之外，依赖读屏软件的用户更是无法完成购买。

Shopify 自己对主题的可访问性有一套相当具体的要求，尤其是想上架 Theme Store 的主题，必须满足硬性门槛。即使你用的是定制主题、不打算上架，这套要求也是一份现成的验收标准。本文先梳理官方要求，再对应到 W3C 的 WCAG 准则，最后给出一份店铺运营和技术人员都能执行的自查清单。关于可访问性的基本概念，可以先看术语页网站可访问性（无障碍）。

一、Shopify 对主题的可访问性要求来自哪里

相关要求分散在两处官方文档里，性质不同：

• Theme Store 主题要求：想上架 Theme Store 的主题必须满足的硬性条件，审核时逐条核对；
• 主题可访问性最佳实践：面向所有主题开发者的建议，按 WCAG 的「可感知、可操作、可理解、健壮」四项原则组织，比 Theme Store 要求更细；
• 帮助中心的店铺可访问性说明：面向商家，讲的是主题之外、由商家自己控制的内容部分，例如图片替代文本、配色和视频。

这三者的分工值得注意：主题负责结构和交互（键盘、焦点、表单、语义），商家负责内容（alt 文本、配色选择、标题层级、视频字幕）。一个主题通过了 Theme Store 审核，并不代表用它搭出来的店铺就是无障碍的。Shopify 帮助中心也明确提醒，遵循这些建议并不能保证店铺完全无障碍。

二、Theme Store 的硬性门槛

按 Theme Store 主题要求 的当前版本，与可访问性相关的条款主要有以下几项：

1. 页面所有部分都必须能用键盘访问，下拉导航也不例外；
2. 用键盘导航时，可聚焦元素必须有可见的焦点状态；
3. 键盘焦点顺序必须与 DOM 顺序一致，整体按从上到下、从左到右移动；
4. 所有图片都必须带 alt 属性，商品图片应使用图片对象的 alt 或 image_tag 过滤器输出替代文本；
5. 表单输入项要有唯一 ID，并用 for 属性与对应的 label 关联；
6. 正文文字对比度至少 4.5:1；大号文字以及边框、图标等非文字元素至少 3:1；
7. 指针输入的触控目标至少 24×24 CSS 像素；
8. h1 到 h6 各级标题在视觉上要有区分；
9. 主题必须使用合法的 HTML，html 元素要带 lang 属性，并输出当前语言代码。

除了逐条检查，还有一个量化门槛：主题在商品页、集合页和首页上，桌面端和移动端的 Lighthouse 无障碍平均分都不得低于 90，同时 Lighthouse 性能平均分不得低于 60。测试用的页面需要放真实的图片和内容，不能靠空白区块拉高分数。

三、这些要求对应 WCAG 的哪些准则

Shopify 的最佳实践文档说明，这些建议是参照 WCAG 制定的。W3C 当前的推荐标准是 WCAG 2.2，海外市场普遍以其中 A 级和 AA 级作为合规参照。把 Shopify 的条款和 WCAG 对上，方便在做海外合规评估时说清楚依据：

• 对比度：对应 1.4.3 对比度（最低）（AA）和 1.4.11 非文字对比度（AA），前者要求文字至少 4.5:1、大号文字 3:1，后者要求界面组件和图形至少 3:1；
• 键盘操作：对应 2.1.1 键盘（A），所有功能都应能通过键盘完成；
• 焦点顺序与可见性：对应 2.4.3 焦点顺序（A）、2.4.7 焦点可见（AA），以及 WCAG 2.2 新增的 2.4.11 焦点不被遮挡（最低）（AA），常见问题是固定头部或 Cookie 横幅把获得焦点的元素完全挡住；
• 跳过链接：对应 2.4.1 绕过区块（A），让键盘用户能跳过重复的头部导航直达正文；
• 图片替代文本：对应 1.1.1 非文字内容（A）；
• 表单标签：对应 3.3.2 标签或说明（A）与 1.3.1 信息和关系（A）；
• 触控目标：对应 WCAG 2.2 新增的 2.5.8 目标尺寸（最低）（AA），基准同样是 24×24 CSS 像素；
• 页面语言：对应 3.1.1 页面语言（A），也就是 html 元素上的 lang 属性；
• 自定义控件：对应 4.1.2 名称、角色、值（A），例如自己写的抽屉购物车、变体选择器要能被读屏软件正确识别。

Shopify 最佳实践文档里还有几条比 Theme Store 门槛更严的建议：主要控件和链接的触控目标最好达到 44×44 像素；跳过链接在获得焦点时要可见；交互不能依赖鼠标悬停才能显示或访问。做定制主题时，建议直接按最佳实践这一档来做。

四、店铺自查清单：上线前逐项过一遍

下面的清单按「谁来做」分组，技术和运营可以分头执行。它不替代专业审计，但能覆盖外贸店铺最常见的问题。

1. 对比度与配色（运营 + 设计）

• 在主题编辑器的配色方案里，逐个检查正文、按钮文字、价格、促销角标与背景的对比度；
• 特别注意浅灰色辅助文字、放在图片上的横幅标题、禁用状态以外的浅色按钮；
• 输入框边框、图标、轮播指示点也要达到 3:1，不只是文字；
• 链接不能只靠颜色区分，最好保留下划线或其他视觉标记。

2. 键盘操作与焦点（技术）

1. 拔掉鼠标，只用 Tab 和 Shift + Tab 从首页走到下单：打开主导航下拉、搜索、筛选、选规格、加购、打开购物车抽屉、进入结账；
2. 每一步都要能看清焦点在哪里，不要用 outline: none 去掉焦点样式而不提供替代，需要区分鼠标和键盘时可以改用 :focus-visible 伪类 定制焦点样式；
3. 弹窗和抽屉打开后焦点应进入其中，关闭后回到触发按钮，按 Esc 能关闭；
4. 页面第一个 Tab 应该能看到「跳到正文」的跳过链接；
5. 检查固定头部、悬浮客服按钮、Cookie 提示是否遮住了当前焦点。

3. 图片与媒体（运营）

• 商品图、集合图、横幅图在后台填写替代文本，描述图片里对购买有用的信息，例如颜色、款式、使用场景；
• 纯装饰图片可以留空 alt，但属性本身要存在，这一点由主题代码保证；
• 图片里带文字的横幅，关键信息要在页面文字里再出现一次；
• 视频尽量不要自动播放，确需自动播放时静音，并提供字幕或文字说明。

4. 表单与交互（技术）

• 联系表单、订阅框、搜索框、数量输入框都要有关联的 label，不能只靠占位文字；
• 报错信息要用文字说明哪里错、怎么改，不能只把边框变红；
• 变体选择器、数量加减按钮、心愿单图标等纯图标按钮，要有可读的名称；
• 用 JavaScript 动态更新的内容，例如加购成功提示、价格变化，要考虑读屏软件能否感知。

5. 结构与语言（技术 + 运营）

• 每页只有一个 h1，标题层级按顺序往下走，不为了字号大小跳级；
• 多语言店铺切换语言后，html 的 lang 值要跟着变化；

五、Lighthouse 分数怎么用，别只看分数

Lighthouse 是最方便的起点：在 Chrome 开发者工具里对首页、集合页、商品页分别跑桌面和移动两种模式，就能大致复现 Theme Store 的测法。不过要理解它的计分方式：按 Lighthouse 官方说明，无障碍分数是各项审计的加权平均，每项审计只有通过或不通过，没有部分得分；而焦点陷阱、Tab 顺序是否合理这类需要人工判断的检查，并不计入分数。

这意味着 90 分以上只说明自动化能检测的问题比较少，并不说明店铺已经可用。实际做法是：用 Lighthouse 或同类工具先扫一遍，修掉明确的问题，再按上面的键盘和表单清单做人工走查，条件允许时再用 VoiceOver 或 NVDA 这类读屏软件走一遍下单流程。

六、定制主题和装应用时的注意事项

很多店铺的问题并不出在主题本身，而是出在后加的东西上：第三方弹窗、评价组件、聊天插件、倒计时条。它们往往自带样式和脚本，可能没有焦点管理，也可能覆盖主题配色。每装一个新应用或上线一个促销活动，都值得重新做一遍键盘走查。

如果是基于官方主题二次开发，改动越多，越要注意不要破坏原有的可访问性实现，例如为了视觉效果删掉焦点样式、把按钮改成无语义的 div、把导航改成只能悬停展开。语义正确的 HTML、准确的替代文本不只服务读屏软件，也让需要解析页面的程序更容易读懂内容；面向海外买家、关心店铺在 ChatGPT、Perplexity、Gemini 里能否被检索和推荐的品牌，可以进一步了解 Shopify 店铺的 AI 搜索可见度优化。建议把可访问性检查写进定制需求和验收标准，和性能检查、上线前检查清单一起执行。

大乐网络做外贸独立站和 Shopify 主题定制时，会把本文这类清单作为交付验收的一部分。如果你正在评估现有主题是否满足要求，也可以把清单直接交给开发团队逐项核对。