Shopify 无障碍检查怎么做：按 WCAG 2.2 修复键盘、焦点和表单

Shopify 主题常见的无障碍问题藏在交互里：Mega menu 只能悬停打开，筛选抽屉没有焦点管理，颜色选项没有文字，错误只用红色表示。自动扫描可以发现一部分标签和对比度问题，却无法判断客户是否真的能用键盘完成购买。

先用真实任务验收

1. 只用键盘进入菜单。 打开、关闭、进入子菜单并清楚看到焦点。
2. 搜索并筛选商品。 选择条件、清空筛选、返回结果列表。
3. 选择变体并加购。 读屏能知道颜色、尺寸、价格和库存变化。
4. 填写表单。 错误信息指出具体字段和解决方法。
5. 完成结账关键步骤。 不依赖拖拽、鼠标悬停或验证码视觉识别。

WCAG 2.2 新增问题与电商很相关

组件级检查比页面截图更有效

• 标题层级与 Landmarks 能描述页面结构。
• 按钮使用 button，链接使用 a，不用无语义 div 模拟。
• 图片 alt 说明目的，装饰图使用空 alt。
• 弹窗打开后焦点进入，关闭后回到触发按钮。
• 动态提示通过适当 ARIA live 区域传达，不突然抢焦点。

把修复写进日常发布流程

建立菜单、卡片、弹窗、表单和轮播的组件验收清单。以后换文案、装应用或做促销时，只需复测受影响组件，而不是每次从头审全站。高风险页面仍应安排人工和辅助技术测试。

发布后还要回看客服反馈、表单放弃和关键流程录屏。真实用户遇到的焦点丢失、提示不清或触控困难，往往不会完整出现在自动扫描报告里，应进入下一轮组件修复而不是当成个别问题。

资料来源与核验口径

本文优先引用平台官方文档与公开标准。功能、费用和合规要求可能调整，实施前应再次核对商店后台与目标市场规定。

1. W3C：Web Content Accessibility Guidelines 2.2
2. W3C WAI：What is new in WCAG 2.2
3. Shopify.dev：Theme Store requirements