模板的可访问性

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

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

提示：如果您是开发人员，您可以使用 Shopify 工具和最佳做法来进一步优化您的模板的可访问性。在 Shopify.dev 了解更多信息。

文本可访问性

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

颜色对比

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

在以下示例中，文本与背景的对比度为 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商户官网原文详情：

Accessibility for themes

When you customize your theme, it’s a good idea to make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Accessibility for your online store is essential to providing an inclusive experience for your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.

• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.

• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.

• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Text headings

When you add headings to your page with the rich text editor, it is important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.

• Text alignment is not justified. Justified text creates inconsistent spacing between words.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

文章内容来源：Shopify商户官方网站