模板的可访问性

自定模板时，最好是挑选有利于维持在线商店可访问性的设计方案和具体内容。设计方案便于访问的网址，便于每个人可以应用该网址，包含伤残人。您的在线商店的可访问性针对为您的顾客给予多元性感受尤为重要。

建立下列手册时考虑到了Web具体内容可访问性指南(WCAG)。因为建立便于访问的网址时必须考虑到很多要素，因而仅遵循下列引导标准并无法确保您的在线商店彻底可访问。您可以访问WCAG网址或查询下边列举的网络资源，便于掌握相关Web可访问性的详细资料。

提醒：假如您是开发者，您可以应用Shopify专用工具和最好作法来进一步提升您的模板的可访问性。在Shopify.dev掌握其他信息。

文本可访问性

在线商店上的文本务必有利于视觉效果阻碍人员或无法阅读文章聚集文段的人员阅读文章。

颜色比照

编写在线商店的颜色时，请保证全部文本都可以供红绿色盲或有别的视觉效果阻碍的顾客查询。这种顾客借助独特的颜色比照来在视觉效果上区别不一样具体内容。您可以应用在线对比率专用工具来查验店铺不一样部位的对比度。

在下列实例中，文本与情况的对比度为2.4:1，针对一些顾客而言无法阅读文章。

在下一个实例中，文本与情况的对比度为4.8:1，针对很多顾客而言更便于阅读文章。

检测全部文本的对比度，包含文章正文、文章标题、连接和表汉字段。请根据下列规则开展：

文章正文文本和按键文本的颜色与情况的对比度最少为4.5:1。

文章标题和其它大文本（文字大小为24px及以上）的颜色与情况的对比度最少为3:1。

照片上（包含ppt、条幅视频）全部文本的颜色都和环境有充足的对比度。针对大文本（文字大小为24px及以上），对比度最少应是3:1。针对更小的文本，对比度最少应是4.5:1。

非文本原素（包含键入外框和标志）的颜色与情况的对比度最少应是3:1。

提醒：在一些模板中，您可以在文本和照片中间摆放一个颜色累加层，进而提升对比度和文本的易读性。

文本文章标题

假如应用富文本编辑软件向网页页面加上文章标题，则尽量使其按顺序排列(1-6)。协助技术性应用文章标题来传递网页页面的布置方法。绕过等级（例如后跟文章标题等级4的文章标题等级2）很有可能会使客户觉得疑惑。请遵循下列规则：

按序应用文章标题，切勿绕过等级。

文本尺寸和两端对齐方法

在编写您模板的样式设定时，请保证您的文本充足大，使用户可以轻轻松松阅读文章。

文本中的词语和英文字母中间的间距还应保持一致，有利于阅读文章。在下面的实例中，文本是两端对齐的，这促使词语中间的间距不一致。

在下一个实例中，文本左两端对齐，这使词语中间的距离一致。

在对文本的尺寸和两端对齐方法开展自定时，请遵循下列规则：

文章正文文本的最少字体大小等同于16px。

文本两端对齐方法不可为“两端对齐”。“两端对齐”的文本会造成词语中间的间隔不一致。

备注名称：即使选用同样的字体大小，不一样的字体样式系列产品也很有可能展现不一样尺寸。字体大小等同于16px时，假如您应用的字体样式看上去比别的字体样式小，则请应用更高的字体大小。

文本连接

当您加上偏向文本的连接时，请保证所有的顾客都可以鉴别这种连接。因为一些顾客无法鉴别颜色，因而您没法仅借助变更颜色来区别连接与基本文本。文本应含有下横线，因此它不依赖于变更颜色来传递文本是一个连接。

假如您要编写模板的css样式表，请保证并没有删掉文本连接款式。请遵循下列规则：

文本连接要不含有下横线，要不具备有别于基本文本的别的视觉冲击。

Shopify商家官方网站全文详细信息：

Accessibilityforthemes

Whenyoucustomizeyourtheme,it’sagoodideatomakedesignandcontentchoicesthathelptokeepyouronlinestoreaccessible.Anaccessiblewebsiteisdesignedsothatitcanbeusedbyeveryone,includingpeoplewithdisabilities.Accessibilityforyouronlinestoreisessentialtoprovidinganinclusiveexperienceforyourcustomers.

TheguidelinesbelowwerecreatedwiththeWebContentAccessibilityGuidelines(WCAG)inmind.Sincetherearemanyfactorstoconsiderwhencreatinganaccessiblewebsite,onlyfollowingguidelinesbelowdoesntguaranteethatyouronlinestoreisfullyaccessible.YoucanlearnmoreaboutwebaccessibilitybyvisitingtheWCAGwebsite,orbyseeingtheresourceslistedbelow.

Tip

Ifyoureadeveloper,thenyoucanfurtheroptimizeyourthemeforaccessibilityusingShopifytoolsandbestpractices.LearnmoreonShopify.dev.

Textaccessibility

Itsimportantthatthetextonyouronlinestoreisreadableforcustomerswhoarevisuallyimpairedorwhohavedifficultyreadingdenseblocksoftext.

Colorcontrast

Whenyoueditthecolorsforyouronlinestore,makesurethatallofyourtextisaccessibletocustomerswhoarecolorblindorotherwisevisuallyimpaired.Thesecustomersrelyonadequatecolorcontrasttovisuallydifferentiateonethingfromanother.Youcanuseanonlinecontrastratiotooltocheckthecontrastofthedifferentpartsofyourstore.

Intheexamplebelow,thetexthasacontrastratioof2.4:1againstitsbackground,andisdifficulttoreadforsomecustomers.

Inthenextexample,thetexthasacontrastratioof4.8:1,andiseasiertoreadformanycustomers.

Testthecontrastofalltext,includingbodytext,headings,links,andformfields.Usethefollowingguidelines:

Thecolorofbodytextandbuttontexthasacontrastratioofatleast4.5:1againstitsbackground.

Thecolorofheadingsandotherlargetext(fontsize24pxandup)hasacontrastratioofatleast3:1againstitsbackground.

Thecolorofalltextoverimages,includingslideshows,banners,andvideos,hassufficientcontrastratiosagainstitsbackground.Forlargetext(fontsize24pxandup),thecontrastisatleast3:1.Forsmallertextthecontrastisatleast4.5:1.

Thecolorofnon-textelements,includinginputbordersandicons,hasacontrastratioofatleast3:1againstitsbackground.

Tip

Insomethemes,youcanplaceacoloroverlaybetweentextandanimagetoimprovethecontrastandreadabilityofthetext.

Textheadings

Whenyouaddheadingstoyourpagewiththerichtexteditor,itisimportanttokeeptheminsequentialorder(1-6).Headingsareusedbyassistivetechnologiestocommunicatehowpagecontentisorganized.Skippingoverlevels,suchasaheadinglevel2followedbyaheadinglevel4,canbeconfusingtousers.Usethefollowingguideline:

Headingsareusedinsequentialorderanddonotskipoverlevels.

Textsizeandalignment

Whenyouedityourthemestypographysettings,makesurethatyourtextislargeenoughforcustomerstocomfortablyread.

Textshouldalsohaveconsistentspacingbetweenwordsandletterstomakeiteasytoread.Intheexamplebelow,thetextalignmentisjustified,whichcreatesinconsistentspacingbetweenwords.

Inthenextexample,thetextalignmentisleft-aligned,whichcreatesconsistentspacingbetweenwords.

Whencustomizingthesizeandalignmentoftext,usethefollowingguidelines:

Theminimumfontsizeforbodytextistheequivalentof16px.

Textalignmentisnotjustified.Justifiedtextcreatesinconsistentspacingbetweenwords.

Note

Differentfontfamiliescanappearcomparativelysmallorlarge,eveniftheyhavethesamefontsize.Ifthefontyoureusingappearssmallerthanotherfontsdoat16px,thenusealargersize.

Textlinks

Whenyouaddlinkstoyourtext,makesurethattheycanbeidentifiedbyallofyourcustomers.Becausesomecustomershavetroubleseeingcolor,youcantrelyonachangeincoloralonetodifferentiatealinkfromregulartext.Textshouldbeunderlinedsothatitdoesntrelyonthechangeincolortocommunicatethatthetextisalink.

Ifyouedityourthemesstylesheet,thenmakesurethatyoudontremovetextlinkstyles.Usethefollowingguideline:

Textlinksareeitherunderlinedorhaveanothervisualdifferentiatorfromregulartext.

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