帮助
登录

模板的辅助功能

在自定义模板时，您做出的设计和内容选择应有助于保持在线商店的辅助功能。设计一个具有良好辅助功能的网站，是为了让所有人（包括残障人士）都能使用。为在线商店做出选择时考虑辅助功能，有助于您为所有客户提供包容性的体验。

下方的指南是根据 Web 内容可访问性指南 (WCAG) 创建的。由于创建具有良好辅助功能的网站需要考虑诸多因素，因此仅遵循以下指南并不能保证您的在线商店完全具备辅助功能。您可以通过访问 WCAG 网站或查看下面列出的资源来详细了解 Web 辅助功能。

在此页面上

文本辅助功能

对于弱视或阅读大段文本有困难的客户来说，务必要确保您在线商店上的文本清晰易读。

颜色对比度

在编辑在线商店的颜色时，请确保所有文本对于色盲客户或其他弱视客户都清晰易读。这些客户依靠足够的颜色对比度来在视觉上区分事物。您可以使用在线对比度工具来检查商店不同部分的对比度。

在下例中，文本与其背景的对比度为 2.4:1，一些客户会发现难以阅读。

浅灰色文本块和纯白色背景。

在下一个示例中，文本的对比度为 4.8:1，许多客户会发现更易于阅读。

深灰色文本块和纯白色背景。

测试所有文本的对比度，包括正文文本、标题、链接和表单字段。请遵循以下准则：

  • 正文文本和按钮文本的颜色与其背景的对比度应至少为 4.5:1。
  • 标题和其他大号文本（字体大小为 24 像素及以上）的颜色与其背景的对比度应至少为 3:1。
  • 图片（包括幻灯片、横幅和视频）上的所有文本的颜色与其背景都应有足够的对比度。对于大号文本（字体大小为 24 像素及以上），对比度应至少为 3:1。对于较小文本，对比度应至少为 4.5:1。
  • 非文本元素（包括输入边框和图标）的颜色与其背景的对比度应至少为 3:1。

文本标题

当您使用富文本编辑器向页面添加标题时，务必要按顺序 (1 - 6) 使用它们。辅助技术使用标题来传达页面内容的组织方式。跳级（例如在 2 级标题后接 4 级标题）可能会对用户造成困惑。请遵循以下准则：

  • 标题按顺序使用，不跳级。

文本大小和对齐方式

当您编辑模板的排版设置时，请确保文本足够大，以便客户能够舒适地阅读。

文本的字间距和单词间距也应保持一致，以便于阅读。在下面的示例中，文本对齐方式为两端对齐，这会造成单词间距不一致。

一段两端对齐的文本。每行文本都填满首尾之间的空间，为适应此设置，单词之间的间距会变得不同。

在下一个示例中，文本对齐方式为左对齐，这会使单词间距保持一致。

一段左对齐的文本。每个单词之间有相同的间距。

自定义文本的尺寸和对齐方式时，请遵循以下准则：

  • 正文的最小字号为 16 px。
  • 文本对齐方式不能是两端对齐。两端对齐的文本会造成单词间距不一致。

文本链接

与常规文本相比，文本链接应带有下划线或具有其他视觉上独特的样式。由于一些客户可能存在色觉障碍，因此不能仅依靠颜色变化来区分链接和常规文本。

文本链接应在同一标签页中打开。在新的标签页或窗口中打开的链接可能会引起混淆，尤其是在移动设备上（旧窗口不可见），并且对客户（尤其是使用屏幕放大功能或不太懂技术的客户）不具包容性。

如果您编辑模板的样式表，请确保不要删除文本链接样式。请遵循以下准则：

  • 文本链接应带有下划线或具有除颜色之外的其他视觉区分标志，以便客户能够区分链接和常规文本。
  • 点击文本链接后，链接在同一标签页中打开。

图片的替代文本

将图片添加到您的在线商店时，请务必确保有视力障碍或失明的客户能够访问这些图片。为此，您可以添加准确描述每张图片的替代文本。使用屏幕阅读器的客户依靠替代文本来了解您在线商店中图片的内容。

您可以在 Shopify 后台中为产品图片添加替代文本。您可以在模板编辑器中为模板中的其他图片添加替代文本。

在为图片添加替代文本时，一个好的做法是假装您正在向一个闭着眼睛的人描述这张图片，帮助他们在脑海中形成画面。您描述图片的方式也取决于网页的上下文。例如，如果您的业务是旅行社，您描述图片的方式可能就与您的业务是户外设备商店时有所不同。请看下图：

两位朋友背着双肩包，互相搂着肩膀，眺望着大海

对于旅行社，您可能需要提及两位朋友正在旅行的国家/地区和区域，以及他们所眺望的大海或海洋的名称。而对于户外设备商店，您可能需要重点介绍这两位朋友的双肩包的品牌和功能。

如果您的业务是旅行社，那么不当的替代文本示例可能是“两个人站在海边”。对于同一家旅行社，良好的替代文本示例可能是“在一个晴朗的日子里，两位朋友正在葡萄牙拉古什旅行，眺望着卡米洛海滩的沙湾”。

幻灯片和视频的辅助功能

在向在线商店添加视频时，请务必考虑有视力障碍、失聪或听力障碍的客户，或可能易患前庭功能障碍的客户的需求。

其中一些客户依赖屏幕阅读器的文本转语音功能来朗读网页内容。视频和音乐中的额外音频（尤其是在意外情况下）可能会让这种体验变得困难。对于失聪或听力障碍的客户，最好为视频添加隐藏式字幕，以便这些客户可以访问内容。

患有前庭功能障碍的客户在观看移动内容时可能会感到头晕。因此，幻灯片和视频不应自动播放，并且客户应能通过控制按钮来控制幻灯片，这一点非常重要。

幻灯片

在向在线商店添加幻灯片时，请遵循以下准则：

  • 幻灯片不自动播放。
  • 如果幻灯片确实自动播放，则它们应包含幻灯片控件，以便客户可以用来暂停、前进或停止幻灯片。

视频

在向在线商店添加视频时，请遵循以下准则：

  • 视频不自动播放。
  • 如果视频确实自动播放，则其音频应为静音。
  • 对于包含音频的视频，视频应完全可见，且不被其他页面元素遮挡。这样可以使隐藏式字幕保持可见。
  • 对于包含对话的视频，应提供文本转录。这些转录可以直接放在页面上，也可以通过链接转至单独的页面。

这些准则同样适用于幻灯片中的视频。

键盘支持

有视力或运动障碍的客户可能会使用键盘在线导航和完成任务。这些客户依靠视觉指示器来了解其键盘焦点在网页上的位置。在下面的示例中，电子邮件字段具有视觉焦点指示器：

在线商店上的客户登录屏幕，其中显示了“电子邮件”和“密码”的表单字段。“电子邮件”字段带有蓝色轮廓。

如果您编辑模板的样式表，请确保不要从任何页面元素中删除键盘焦点样式。请遵循以下准则：

  • 当具有键盘焦点时，所有交互式页面元素都应有一个清晰的视觉指示器。这些元素包括链接、按钮和表单字段。

资源

若要详细了解本文中讨论的主题相关的 Web 辅助功能，请参阅以下资源。

颜色对比度资源

文本资源

替代文本资源

幻灯片和视频资源

键盘支持资源

在本节中