用 Shopify 实现无障碍

Shopify 的主题和应用决定无障碍。结账在很大程度上由 Shopify 规定。

常见发现处

对比度过低的主题配色、没有 alt 文本的产品图片、没有键盘操作的评价与弹窗应用、只在悬停时展开的大型菜单、没有暂停的轮播。Shopify 内核通常不是问题——问题在于主题、应用以及在富文本编辑器里创建的内容。

检查并选择主题

主题决定对比度、可见焦点、标题结构以及菜单和筛选的键盘操作。选择前的标准：用 Tab 键走一遍首页、一个系列和一个产品页——焦点是否始终可见？菜单能否不用鼠标打开？文字和按钮的对比度是否至少 4,5:1？Online Store 2.0 的默认主题（Dawn 及其衍生）是稳妥的起点；对于付费主题，在演示上做键盘测试、并向供应商索取无障碍说明会有帮助。

产品图片、变体和富文本

给后台里的每张产品图片一个描述内容的 alt 文本——不是文件名。变体图片同理。以图形形式烧进徽章或横幅里的文字（“促销”“仅限今日”）对屏幕阅读器不可见；用真正的文本。在产品描述的富文本编辑器里干净地使用标题级别（不要只是把文字放大），列表用真正的列表。

应用与嵌入式小组件

评价、弹窗、追加销售和 Cookie 横幅类应用经常注入自己的小组件，困住键盘焦点、没有标签，或显示无法关闭的浮层。用键盘逐一测试每个应用；轮播和倒计时类应用需要一个暂停，且不得让任何东西闪烁。以应用形式提供的无障碍浮层不解决结构性问题，并受到残障权益组织的批评。拿不准就移除该应用。

结账：Shopify 规定什么、不规定什么

Shopify 的标准结账由 Shopify 维护，大部分是按无障碍方式构建的——你在那里的调节余地不大。你能影响的是：结账扩展和自定义字段（礼品留言、年龄验证）可能干扰键盘或屏幕阅读器的使用，而通往结账的路径——购物车、折扣码输入框、配送选择——在主题里。这些步骤也要测试。

测试与常见问题

快速测试：只用键盘操作首页、一个系列和一个产品页，在浏览器里放大到 200%，运行一个扩展如 WAVE 或 axe DevTools。a11yglass 的免费扫描还会检查所交付的 HTML 的对比度、alt 文本、标签、语言和结构。我的 Shopify 商店需要无障碍声明吗？通常需要——一个供消费者购买的商店属于 BFSG 意义上的电子商务；参见关于无障碍声明的页面。Shopify 的结账已经无障碍了吗？大部分是 Shopify 的责任，但扩展可能把它弄坏。哪个主题是无障碍的？没有认证标；决定性的是具体情况下的实现。

a11yglass 如何帮助

免费扫描检查交付的 HTML 和 CSS 中可自动识别的 WCAG 违规，并对每项发现指出成功标准和一个具体措施。它可发现约 20–35 % 的问题，不能替代完整评估。

继续阅读

尽最大所知提供的一般信息，非法律咨询。个案请咨询专精于 IT 法的律师事务所。