Shopify 主题的无障碍最佳实践

在你创建主题的时候，做出有助于内容无障碍的设计选择是非常重要的。一个无障碍的主题意味着任何人都能使用它，包括那些依赖 辅助技术 的用户。为你的主题实现无障碍设计，是为商家和顾客提供包容性体验的关键。

Shopify 主题的无障碍最佳实践是基于 Web 内容无障碍指南 (WCAG) 制定的。

注意

在创建无障碍主题时，有很多因素需要考虑。只遵循本页的最佳实践，并不能保证你的主题是完全无障碍的。

无障碍测试

你可以使用以下工具测试你的主题是否具备无障碍性：

如果你在开发过程中使用了持续集成（CI）流程，那么你可以添加一个 CI 检查，以确保对主题代码的修改不会显著降低无障碍得分。你可以使用 Shopify Lighthouse CI GitHub action 来实现，这是一个由 Shopify 开发的 GitHub action，会将你的主题代码上传至一个基准商店，然后测量并计算主题的无障碍性。

无障碍原则

在创建主题时，重点关注 WCAG 2.0 指南中的四大核心原则：

  • 可感知 Perceivable：信息和 UI 组件必须以用户能感知的方式呈现。
  • 可操作 Operable：UI 组件和导航必须是可操作的。
  • 可理解 Understandable：信息和 UI 的操作方式必须是可理解的。
  • 稳健 Robust：内容必须足够清晰，能够被各种用户代理（包括辅助技术）可靠地解释。

以下部分列出了针对商家和顾客如何与主题交互的无障碍最佳实践。

键盘与手势控制

视觉或运动障碍用户可能会使用键盘来浏览和完成线上任务。他们依赖视觉提示来知道键盘焦点当前在页面的哪个位置。你的主题必须允许所有链接、按钮、下拉导航和表单控件都可以通过键盘操作。

键盘支持

  • 焦点指示器在活跃元素上是可见且一致的。无论是用鼠标还是键盘操作，焦点指示器都必须明显。
  • 键盘焦点顺序必须与 DOM 顺序一致。焦点应该从上到下、从左到右移动。
  • 使用键盘时，在桌面上焦点样式是可见的。
  • 你的主题不能依赖鼠标悬停来展示或访问内容。
  • 可以使用 Tab 键和 Shift + Tab 键来浏览主题。
  • 焦点切换不能突然改变上下文。例如，用键盘导航时，焦点不能在获得焦点时突然跳转到别处。

手势支持

  • 缩放手势，例如双指捏合放大，必须始终可用。
  • 所有需要多指或复杂手势的功能（比如浏览 3D 模型）也应该能通过单次点击或点击实现。

页面结构

你的主题必须使用有效的 HTML 构建。你可以使用 W3 HTML 检查器 验证生成的 HTML。以下是对页面结构中具体元素的最佳实践建议：

全局

  • 页面 lang 属性设置在 html 元素上，帮助屏幕阅读器用正确的口音和方言朗读内容。
  • 启用了视口缩放。你的主题不应使用 maximum-scale 和 user-scalable="no" 属性。
  • 提供跳转链接（skip link），并在获得焦点时可见，帮助用户快速跳过公共内容（如页头）直接进入页面主要内容。主要内容容器应包含 tabindex="-1" 来接收焦点。
  • 内容呈现顺序是线性的。你的主题不使用 tabindex 属性的正值或 autofocus 属性，只有 0 或 -1 的值。正值 tabindex 和自动聚焦会强制用户按照特定顺序浏览页面，应该避免。

标题

  • HTML 标题使用标题标签。主题使用 h1 到 h6 标签来表达页面内容的组织结构。
  • 标题标签使用有序逻辑。不要为了设计美观而随意使用标题标签。
  • h1 元素用于标识页面的主要主题。

导航

  • 导航区域使用 nav HTML 元素包裹。
  • 使用 aria-current 来告诉用户当前所在的页面。
  • 不要使用 role="menu" 或 role="menuitem" 来做导航。

下拉菜单导航

  • 使用 aria-expanded 来表示下拉菜单的展开或收起状态。
  • 使用 aria-controls 来告诉辅助技术下拉菜单控制的隐藏容器。
  • 使用 aria-current 来告诉用户当前页面或位置。
  • 支持 Enter 和 Space 键来展开下拉菜单。焦点应保持在触发器上。按 Tab 键应将焦点移动到下拉菜单的第一个项目。
  • 支持 Esc 键来收起下拉菜单，并将焦点返回到触发器上。

产品信息

  • 产品图片包含描述性的 alt 文本。
  • 打折价与原价在视觉上和语义上都需做区分，提供屏幕阅读器可识别的隐藏文本来说明价格变化。
  • 如果在选择不同的产品变体时，产品价格和库存动态变化，那么这些变化也必须通过屏幕阅读器传达。
  • 使用 aria-live 来传达 UI 中的动态变化。

控件

  • a 元素用于链接。用于跳转、加载新页面或更改键盘焦点位置。
  • button 元素用于触发页面行为，比如打开模态窗或排序数据表。
  • 链接的目的应从链接文字中就能看出来。
  • 会打开新窗口的链接应有提示。可使用带替代文本的图标，让使用屏幕阅读器或仅使用键盘的用户也知道会打开新窗口。

表格

  • 使用 table 元素呈现表格数据。
  • 使用 caption 元素帮助辅助技术识别是表格内容。
  • 表头使用 th 元素，并带有 scope 属性。
  • 使用 scope="col" 表示列头，scope="row" 表示行头。

表单

  • 所有表单字段都要有标签。可使用 aria-label、.visuallyhidden 元素、浮动标签或可见标签来实现。表单控件需要有清晰表述其用途的名称。
  • 输入字段的标签使用 for 属性，并包含在主题设置中。
  • 必填字段使用 required 属性。
  • 字段使用 autocomplete 属性。自动填充可以帮助用户更快填写表单。

表单错误

  • 将焦点放在反馈信息上。尽可能快地将提交或填写表单后出现的错误反馈给屏幕阅读器。
  • 错误信息应清晰具体。
  • aria-describedby 属性应用于 input 元素，用于引用错误提示容器。
  • 通知、错误消息、成功消息应能被朗读。关键消息通过 aria-live 被屏幕阅读器读出。

媒体

媒体内容可能会令人分心、打扰或出其不意。你主题中的媒体内容应遵循以下最佳实践：

  • 媒体不自动播放。
  • 媒体控件使用原生 HTML 元素。按钮应有切换状态，滑块用 range 输入。
  • 可以使用 Space 键暂停媒体播放。

图片与图标

  • 所有 img 元素必须有 alt 属性。否则屏幕阅读器会读出图片文件的路径名。
  • 商品或内容图像的 alt 文本需描述图片内容，便于屏幕阅读器用户理解。
  • 装饰性图像使用空的 alt 属性，如 <img src="…" alt="">，让屏幕阅读器忽略。

视频

  • 提供隐藏字幕（Closed captions）。
  • 提供描述性音轨。
  • 如果必须自动播放（比如轮播图中的视频），需静音。
  • 视频内容不能被视觉元素遮挡。
  • 可以使用 Space 键暂停和播放视频。

音频

  • 提供文字转录。
  • 可暂停自动播放音频。

色彩与对比度

为主题设置颜色时，要确保色弱或视觉障碍用户也能轻松阅读文本内容。这类用户需要足够的颜色对比度来区分元素。

你可以使用 在线对比度工具 来检测商店中不同元素的对比度。主题内容应遵循以下最佳实践：

  • 小于 24 像素（常规）或 18.5 像素（加粗）的文本，对比度需达到 4.5:1。
  • 大于等于 24 像素（常规）或 18.5 像素（加粗）的文本，对比度需达到 3.0:1。
  • 图标对比度需达到 3.0:1。
  • 输入框边框对比度需达到 3.0:1。
  • 不要只用颜色来传达信息，还应提供图标、文字等其他形式。

动态组件

动态组件比如轮播图、预测搜索、模态窗口、标签页等可能会较复杂且难以操作。应使用屏幕阅读器可识别的元素，提供上下文，并支持键盘操作。

抽屉和模态框

  • 打开抽屉或模态框时，将焦点移动到其标签元素。
  • 键盘导航应保持在抽屉或模态框内。
  • 支持 Esc 键关闭抽屉或模态框，并将焦点返回至触发按钮。
  • 模态框使用 dialog 角色识别。

幻灯片

  • 自动播放的幻灯片内容可以暂停或停止。
  • 幻灯片内容可通过“上一页”和“下一页”按钮访问。

触屏和移动设备

对触屏和移动设备而言，主要考虑用户能否轻松切换方向并点击目标元素浏览内容。

主要控制和链接的点击区域应至少为 44x44 像素。这些包括：

  • 主菜单链接（无论是第一级还是第三级）
  • 所有表单的提交按钮，如联系表单、评论表单、搜索、加入购物车按钮
  • 购物车和汉堡菜单的菜单按钮
  • 模态框的关闭按钮
  • 商品页面中的变体和选项，例如颜色、尺码、数量