shopify123.cn--一个shopify自学开店、赚美金的网站!
当前位置:shopify > shopify店铺 > 正文

shopify店铺尺寸(shopify商店为特殊人群提供的文本

模版的可出访性

自订模版时,最合适优先选择有利于维持新浪网零售店可出访性的结构设计和文本。结构设计更易出访的中文网站,以期每一人都能采用该中文网站,主要包括残疾人。您的新浪网零售店的可出访性对为您的顾客提供开放性体验至关重要。

建立下列手册时充分考虑了 Web 文本可出访性手册 (WCAG)。由于建立更易出访的中文网站时需要考虑许多因素,因此仅遵从下列指导原则并不能保证您的新浪网零售店完全可出访。您能出访 WCAG 中文网站或查阅上面列出的资源,以期介绍有关 Web 可出访性的详细资料。

提示信息:假如您是开发者,您能采用 Shopify 辅助工具和最佳做法来进一步优化您的模版的可出访性。在 Shopify.dev 介绍更多信息。

文档可出访性

新浪网零售店上的文档必须易于听觉心理障碍专业人士或无法写作密集段落的专业人士写作。

色调对照

撰稿新浪网零售店的色调时,请保证大部份文档都可供红绿色盲或有其它听觉心理障碍的顾客查阅。这些顾客倚靠鲜明的色调对照来在听觉上界定相同文本。您能采用新浪网对照率辅助工具来检查零售店相同部分的清晰度。

在下列实例中,文档与大背景的清晰度为 2.4:1,对这类顾客而言无法写作。

在下两个实例中,文档与大背景的清晰度为 4.8:1,对许多顾客而言更更易写作。

测试大部份文档的清晰度,主要包括节录、副标题、镜像和表单词段。请按照下列原则进行:

节录文档和按钮文档的色调与大背景的清晰度最少为 4.5:1。

副标题和其它大文档(调色板为 24 px 及以上)的色调与大背景的清晰度最少为 3:1。相片上(主要包括PPT、横幅和视频)大部份文档的色调都与大背景有足够多的清晰度。对大文档(调色板为 24 px 及以上),清晰度最少应属 3:1。对更小的文档,清晰度最少应属 4.5:1。非文档元素(主要包括输入前面板和工具栏)的色调与大背景的清晰度最少应属 3:1。

提示信息:在这类模版中,您能在文档和相片间放置两个色调叠加层,从而提高清晰度和文档的时效性。

文档副标题

按顺序采用副标题,切勿埃唐佩县级别。

文档大小不一和翻转形式

在撰稿您模版的开本设置时,请保证您的文档足够多大,使顾客能够轻松写作。

文档中的字汇和字母间的间距还应维持完全一致,易于写作。在上面的实例中,文档是两边翻转的,这使得字汇间的间距不完全一致。

在下两个实例中,文档左翻转,这使字汇间的宽度完全一致。

在对文档的大小不一和翻转形式进行自订时,请遵从下列原则:

节录文档的最小明甫相等于 16 px。文档翻转形式不得为“两边翻转”。“两边翻转”的文档会导致字汇间的宽度不完全一致。

附注:即使优先选择相同的明甫,相同的手写体系列也可能呈现相同大小不一。明甫相等于 16 px 时,假如您采用的手写体看起来比其它手写体小,则请采用更大的明甫。

文档镜像

当您添加指向文档的镜像时,请保证大部份顾客都可辨识这些镜像。由于这类顾客无法辨识色彩,因此您无法仅倚靠更动色调来界定镜像与常规性文档。文档应暗含换行,所以它不依赖于更动色调来传达文档是两个镜像。

假如您要撰稿模版的JSP,请保证没有删除文档镜像样式。请遵从下列原则:

文档镜像或者暗含换行,或者具有相同于常规性文档的其它听觉效果

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.

Tip

If youre a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

Its 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.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

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 themes 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.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font youre using appears smaller than other fonts do at 16 px, then use a larger size.

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 cant rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesnt rely on the change in color to communicate that the text is a link.

If you edit your themes stylesheet, then make sure that you dont remove text link styles. Use the following guideline:

Text links are either underlined or have another visual differentiator from
举报/反馈

版权保护: 本文由 shopify 原创,转载请保留链接: http://www.shopify123.cn/shopifydianpu/3685.html