检查Shopify主题可访问性,可以从只用键盘完成一次选购开始,再补对比度、读屏、缩放与触控检查。一条路径走通只能说明这条路径在当时条件下可用,不能据此判定整店符合WCAG,也不能把Lighthouse满分当成全部用户都能顺利下单。
先选页面、状态和实际动作
至少覆盖店铺实际使用的首页、集合、产品、购物车及购买流程;有不同市场、长翻译、缺货商品或应用弹层时,增加相应样本。记录主题版本、浏览器、设备、辅助工具和检查日期,避免用上一版结果给新版本背书。Shopify主题可访问性指南也明确:仅遵循该页最佳实践,不保证主题完全可访问。

- 从地址栏进入页面后,用Tab和Shift+Tab前后移动,确认焦点可见、目标能到达,隐藏内容不会无故抢走焦点。
- 用键盘展开导航和筛选,选择规格,再加购。操作后检查状态、价格与库存变化能否被读屏获知,不能只变色。
- 打开实际采用模态模式的购物车抽屉或对话框,检查焦点进入弹层、保持在其中,关闭后回到合理触发位置;同时核关闭按钮和适用的Esc行为。
- 完成表单的正常与出错路径;进入结账时继续检查,把问题交给实际负责的主题、应用或平台支持方。
焦点顺序应保留内容与操作的逻辑关系,并与合理的DOM顺序协调。不要用正数tabindex强行拼出视觉路线;移动重排、弹层和不同书写方向尤其不能只套“从左上走到右下”。
对比度要测实际组合,也要知道例外
WCAG 2.2的文字对比度说明与非文本对比度说明给出了以下判断。比例是门槛,不能把4.499:1四舍五入成4.5:1后通过。
| 对象 | 最低对比度 | 判断范围 |
|---|---|---|
| 普通文字及文字图片 | 4.5:1 | 文字与其背景;占位文字和聚焦时显示的文字也要核 |
| 大号文字 | 3:1 | 至少18pt普通字或14pt粗体,另考虑相应字体与语言的等效大小 |
| 识别控件、状态所必需的非文本信息及必要图形 | 3:1 | 与相邻颜色比较;并非页面所有装饰边框都必须达到此值 |
| 禁用控件、纯装饰与Logo等 | 按对应条款例外判断 | 例外范围各不相同,不能把普通业务文字说成品牌色就豁免 |
使用浏览器计算样式与实际背景求比值;透明、渐变和图片背景要核文字所在区域的组合。默认、hover、focus、选中和错误状态分别检查。即使某类禁用控件属于条款例外,也要让用户理解它为何暂不可用。错误和选中状态不能只靠颜色表达。
表单错误必须让人找到、理解并修正
优先提供持续可见且与输入框关联的标签,不用输入后就消失的placeholder承担全部说明。必填与格式要求在需要时明确写出;错误文字说明哪个字段、为什么失败以及怎样修改,并保留已经正确填写的内容。
Shopify指南建议将焦点放到反馈消息,并把错误传达给读屏。实际表单可以采用可聚焦的错误摘要,提供到具体字段的入口;字段通过aria-describedby关联说明。是否直接聚焦字段,要结合表单结构验证,不能把“永远跳第一个字段”当作唯一规则。
ALT看图片在当前上下文承担什么任务
| 用途 | 替代文本的处理 |
|---|---|
| 商品或细节信息 | 说明画面中对识别商品有用的颜色、部位、角度或结构 |
| 纯装饰,或信息已由邻近文字充分提供 | 适用时使用空alt="",避免重复朗读 |
| 图片是链接或按钮的唯一内容 | 提供目标或动作的可访问名称;已有按钮名称时避免重复 |
| 复杂图表或重要文字图 | 简短ALT配可见正文中的完整说明、数据或表格 |
W3C图片ALT决策树强调用途和上下文。同一张图在不同位置承担的任务可能不同,不要求所有位置机械复用一句描述,也不为了关键词排名改写画面事实。
工具发现问题后,还要回到真实组件
自动工具适合检查部分语义、名称与对比度问题;人工还要核标题结构、朗读顺序、缩放、菜单、动态价格、轮播暂停和弹层操作。第三方客服、评论、订阅控件也是用户经历的一部分,应纳入店铺检查,再按归属联系应用方;不能因为不是主题代码就不测。
主要触控控件可按Shopify指南的44×44 CSS像素建议检查,同时验证邻近目标间距和手机误触;这项平台建议不能被说成WCAG全部等级的统一要求。自定义内容块可结合section实现与编辑器检查核对,手机路径参见移动端页面检查。
每次主题、应用或重要内容更新后,复测受影响路径并记录实际覆盖范围。清晰文本、链接和结构也有利于内容理解,但可访问性、搜索索引与排名各有验证方式,不能互相替代。