模板,Shopify店铺模版的可访问性指导教程

模板,Shopify可访问性指导教程的核心内容

                                                                                               

模板,Shopify店铺模板可访问性指导教程正文

       

   

   自定义Shopify在模板中，最好选择有助于保持在线商店可访问性的设计和内容。设计一个容易访问的网站，这样每个人都可以使用这个网站，包括残疾人。您的在线商店的可访问性对为您的客户提供包容性体验至关重要。

   

   创建以下指南时充分考虑 Web 内容可访问性指南 (WCAG)。由于创建易于访问的网站时需要考虑许多因素，因此仅遵循以下指导原则并不能保证您的在线商店完全可访问。您可以访问 WCAG 网站或查看下面列出的资源，以了解 Web 可访问性详细信息。

   

   文本可访问性

   

   在线商店的文本必须方便视觉障碍或难以阅读密集段落的人阅读。

   

   颜色对比

   

   编辑在线商店的颜色时，请确保所有文本都可以供有色盲或其他视觉障碍的客户查看。这些客户在视觉上通过独特的颜色对比来区分不同的内容。您可以使用在线比较工具来检查商店不同部分的比较。

   

   在以下示例中，文本与背景的对比度为 2.4:1，有些客户很难阅读。

   

       

   

   在下一个示例中，文本与背景的对比度为 4.8:1，对许多顾客来说，阅读。

   

       

   

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

   

   文本和按钮文本的颜色与背景的对比度至少为 4.5:1。

   

   标题等大文本(字体大小为 24 px 及以上）的颜色与背景的对比度至少为 3:1。

   

   图片上所有文本的颜色(包括幻灯片、横幅和视频)都与背景有足够的对比度。对于大文本(字体大小 24 px 及以上），对比度至少应为 3:1。对于更小的文本，对比度至少应为 4.5:1。

   

   非文本元素(包括输入边框和图标)的颜色与背景的对比度应至少为 3:1。

   

   提示： 在某些模板中，您可以在文本和图片之间放置颜色叠加层，以提高对比度和文本可读性。

   

   文本标题

   

   如果使用格式文本编辑器向页面添加标题，则必须按顺序排列 (1 )-6)。辅助技术使用标题来传达页面的布局。跳过级别(如后跟标题级别 4 标题级别 2)可能会让用户感到困惑。请遵循以下标准:

   

   按顺序使用标题，请勿跳过级别。

   

   文本大小和对齐方法

   

   编辑模板布局时，请确保您的文本足够大，以便客户能够轻松阅读。

   

   文本中单词和字母之间的间隔也应保持一致，以便于阅读。在下面的例子中，文本两端对齐，使单词之间的间隔不一致。

   

       

   

   在下一个例子中，文本左对齐，使单词之间的间距一致。

   

       

   

   自定义文本的大小和对齐方法时，请遵循以下标准

   

   文本的最小字号相当于 16 px。

   

   文本对齐不得为两端对齐。两端对齐的文本会导致单词间距不一致。

   

   注：即使选择相同的字体大小，不同的字体系列也可能呈现不同的大小。相当于 16 px 如果你使用的字体看起来比其他字体小，请使用更大的字体大小。

   

   文本链接

   

   当您添加指向文本的链接时，请确保所有客户都能识别这些链接。因为有些客户很难识别颜色，所以你不能仅仅依靠改变颜色来区分链接和传统文本。在下面的例子中，文本发现我们的故事有一个下划线，所以它不依赖于改变颜色来传达文本是一个链接：

   

       

   

   如需编辑模板样式表，请确保文本链接样式未删除。请遵循以下标准：

   

   文本链接要么有下划线，要么有不同于传统文本的其他视觉效果。

   

   图片替代文本

   

   当您向您的在线商店添加图片时，请确保盲人或视力差的客户也可以访问这些图片。您可以通过添加准确描述每个图片内容的替代文本来实现这一目的。使用屏幕阅读器的客户依靠替代文本在您的在线商店上获取图片内容。

   

   你可以从 Shopify 后台将替代文本添加到产品图片。您可以通过模版管理器将替代文本添加到模版中的其他图片。

   

   在将替代文本添加到图片中时，假设你想向闭上眼睛的人描述图片是一个很好的方法。帮助他们在脑海中形成一张图片。你描述图片的方式也取决于网页的内容。例如，如果你的企业是一家旅行社，述图片的方式可能与您的企业是户外设备店时不同。请考虑以下图片：

   

       

   

   两个背着背包的朋友互相拥抱，看着大海

   

   对于旅行社，你可以参考这两个朋友正在旅行的国家和地区，以及他们正在看的海洋的名字。另一方面，对于户外设备店，你可能会关注这两个朋友背包的品牌和特点。

   

   如果你的企业是一家旅行社，效果较差的替代文本示例可能是两个人面对大海。对于同一家旅行社来说，更好的替代文本示例可能是在阳光明媚的日子里，两个朋友在葡萄牙拉古什旅行，他们一起俯瞰卡米洛海滩的海滩。

   

   幻灯片和视频可访问性

   

   当您向您的在线商店添加视频时，请确保考虑以下客户群体的需求：视力差、听力障碍或听力差的客户，或可能容易患前庭功能障碍的客户。

   

   部分客户依靠屏幕阅读器的文本到语音转换功能，可以大声朗读网页的内容。视频和音乐的额外音频可能会使这种体验难以实现，特别是当它发生事故时。最好在您的视频中添加隐藏的字幕，以便聋人或听力障碍的客户可以访问这些内容。

   

   前庭功能障碍的客户可能会因观看移动内容而头晕。因此，不自动播放幻灯片和视频是非常重要的。

   

   幻灯片

   

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

   

   幻灯片不自动播放。

   

   如果幻灯片自动播放，应包括客户可以暂停或停止幻灯片播放的设置。

   

   视频

   

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

   

   视频不会自动播放。

   

   如果视频自动播放，则其音频静音。

   

   对于包含音频的视频，该视频完全可见，不受其他页面元素的阻碍。这可以使隐藏的字幕可见。

   

   文本听录稿可用于包含对话的视频。这些听录稿可以包含在页面上，也可以包含在可以通过链接访问的单独页面上。

   

   这些标准也适用于幻灯片中的视频。

   

   键盘支持

   

   视力或运动障碍的客户可以使用键盘在线导航并完成任务。这些客户依靠视觉指示器来传达他们的键盘焦点在网页上的位置。在以下示例中，电子邮件字段有一个视觉焦点指示器：

   

       

   

   如需编辑模板样式表，请确保键盘焦点样式没有从任何页面元素中删除。请遵循以下标准：

   

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

   

   资源

   

   要详细了解本文讨论的主题Web 可访问性，请参考以下资源。

   

   色彩对比度资源

   

   Colors with Good Contrast(对比度好的颜色)来自 Web Accessibility Initiative 的一篇文章

   

   Contrast Ratio，在线工具可用于查找两种颜色之间的对比度

   

   Color Contrast Analyzer，由 下载的对比度应用程序Paciello Group 开发

   

   文本资源

   

   16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake来自 Smashing Magazine 的一篇文章

   

   来自 Web AIM 的文章：Text alignment（Text alignment）

   

   Link Appearance(链接外观)，来自 Web AIM 的一篇文章

   

   来自 Web AIM 的文章：Using Headings for Content Structure(标题用于内容结构)

   

   取代文本资源

   

   Text to Speech(从文本到语音转换)，从 Web Accessibility Initiative 的一篇文章

   

   Alternative Text(替代文本)，来自 Web AIM 的一篇文章

   

   来自 Medium 的文章：Considerations when writing alt text(编写替代文本时的注意事项)

   

   幻灯片和视频资源

   

   来自 A11Y 项目文章：A Primer to Vestibular Disorders(前庭疾病入门)

   

   Text to Speech(从文本到语音转换)，从 Web Accessibility Initiative 的一篇文章

   

   Video Captions(视频字幕)，来自 Web Accessibility Initiative 的一篇文章

   

   来自 YouTube 帮助文章：Use automatic captioning(使用自动字幕)

   

   Captions and subtitles(字幕和副标题)，来自 Vimeo 帮助中心的文章

   

   键盘支持资源

   

   Keyboard Compatibility(键盘兼容性)，来自 Web Accessibility Initiative 的一篇文章

   

   Introduction to Focus(焦点Google 开发人员的文章(来源:Shopify）

   

   以上内容属于作者个人观点，不代表跨境网的立场！如有侵权，请联系我们。

   

   相关推荐:Shopify模板中如何使用多货币脚本？Shopify商店货币转换步骤