自定義模板時(shí)，請(qǐng)選擇有助于保持在線商店可訪問性的設(shè)計(jì)和內(nèi)容。設(shè)計(jì)易于訪問的網(wǎng)站，以便每個(gè)人都可以使用該網(wǎng)站，包括殘疾人。通過為在線商店選擇可保證可訪問性的選項(xiàng)，您可以為您的客戶提供包容性體驗(yàn)。
創(chuàng)建以下指南時(shí)充分考慮了 Web 內(nèi)容可訪問性指南 (WCAG)。由于創(chuàng)建易于訪問的網(wǎng)站時(shí)需要考慮許多因素，因此僅遵循以下指導(dǎo)原則并不能保證您的在線商店完全可訪問。您可以訪問 WCAG 網(wǎng)站或查看下面列出的資源，以便了解有關(guān) Web 可訪問性的詳細(xì)信息。
提示：如果您是開發(fā)人員，您可以使用 Shopify 工具和最佳做法來進(jìn)一步優(yōu)化您的模板的可訪問性。在 Shopify.dev 了解更多信息。
在線商店上的文本必須便于視覺障礙人士或難以閱讀密集段落的人士閱讀。
編輯在線商店的顏色時(shí)，請(qǐng)確保所有文本都可供色盲或有其他視覺障礙的客戶查看。這些客戶依靠鮮明的顏色對(duì)比來在視覺上區(qū)分不同內(nèi)容。您可以使用在線對(duì)比率工具來檢查商店不同部分的對(duì)比度。
在以下示例中，文本與背景的對(duì)比度為 2.4:1，對(duì)于某些客戶來說難以閱讀。
在下一個(gè)示例中，文本與背景的對(duì)比度為 4.8:1，對(duì)于許多客戶來說更易于閱讀。
測(cè)試所有文本的對(duì)比度，包括正文、標(biāo)題、鏈接和表單字段。請(qǐng)按照以下準(zhǔn)則進(jìn)行：
正文文本和按鈕文本的顏色與背景的對(duì)比度至少為 4.5:1。 標(biāo)題和其他大文本（字體大小為 24 px 及以上）的顏色與背景的對(duì)比度至少為 3:1。 圖片上（包括幻燈片、橫幅和視頻）所有文本的顏色都與背景有足夠的對(duì)比度。對(duì)于大文本（字體大小為 24 px 及以上），對(duì)比度至少應(yīng)為 3:1。對(duì)于更小的文本，對(duì)比度至少應(yīng)為 4.5:1。 非文本元素（包括輸入邊框和圖標(biāo)）的顏色與背景的對(duì)比度至少應(yīng)為 3:1。
提示：在某些模板中，您可以在文本和圖片之間放置一個(gè)顏色疊加層，從而提高對(duì)比度和文本的可讀性。
如果使用富文本編輯器向頁(yè)面添加標(biāo)題，則務(wù)必使其按順序排列 (1 -6)。輔助技術(shù)使用標(biāo)題來傳達(dá)頁(yè)面的布局方式。跳過級(jí)別（例如后跟標(biāo)題級(jí)別 4 的標(biāo)題級(jí)別 2）可能會(huì)使用戶感到困惑。請(qǐng)遵循以下準(zhǔn)則：
按順序使用標(biāo)題，請(qǐng)勿跳過級(jí)別。
文本大小和對(duì)齊方式
在編輯您模板的版式設(shè)置時(shí)，請(qǐng)確保您的文本足夠大，使客戶能夠輕松閱讀。
文本中的字詞和字母之間的間隔還應(yīng)保持一致，便于閱讀。在下面的示例中，文本是兩端對(duì)齊的，這使得字詞之間的間隔不一致。
在下一個(gè)示例中，文本左對(duì)齊，這使字詞之間的間距一致。
在對(duì)文本的大小和對(duì)齊方式進(jìn)行自定義時(shí)，請(qǐng)遵循以下準(zhǔn)則：
正文文本的最小字號(hào)相當(dāng)于 16 px。 文本對(duì)齊方式不得為“兩端對(duì)齊”。“兩端對(duì)齊”的文本會(huì)導(dǎo)致字詞之間的間距不一致。備注：即使選擇相同的字號(hào)，不同的字體系列也可能呈現(xiàn)不同大小。字號(hào)相當(dāng)于 16 px 時(shí)，如果您使用的字體看起來比其他字體小，則請(qǐng)使用更大的字號(hào)。
當(dāng)您添加指向文本的鏈接時(shí)，請(qǐng)確保所有客戶都可識(shí)別這些鏈接。由于某些客戶難以識(shí)別色彩，因此您無(wú)法僅依靠更改顏色來區(qū)分鏈接與常規(guī)文本。文本應(yīng)帶有下劃線，所以它不依賴于更改顏色來傳達(dá)文本是一個(gè)鏈接。
如果您要編輯模板的樣式表，請(qǐng)確保沒有刪除文本鏈接樣式。請(qǐng)遵循以下準(zhǔn)則：
文本鏈接要么帶有下劃線，要么具有不同于常規(guī)文本的其他視覺效果。
圖片的替代文本
當(dāng)您向您的在線商店添加圖片時(shí)，請(qǐng)務(wù)必使盲人或視力不佳的客戶也能訪問這些圖片。您可以通過添加精確描述每張圖片內(nèi)容的替代文字來實(shí)現(xiàn)此目的。使用屏幕閱讀器的客戶依靠替代文字來獲取您在線商店上的圖片內(nèi)容。
您可以從 Shopify 后臺(tái)將替代文本添加到產(chǎn)品圖片。您可以通過模板管理器將替代文本添加到模板中的其他圖片。
在將替代文本添加到圖片時(shí)，假設(shè)您要向閉著眼睛的人描述圖片是一個(gè)好的做法。幫助他們?cè)谀X海中形成一張圖片。您描述圖片的方式也取決于網(wǎng)頁(yè)的內(nèi)容。例如，如果您的企業(yè)是一家旅行社，那么您描述圖片的方式可能與當(dāng)您的企業(yè)是一家戶外裝備店時(shí)有所不同。
對(duì)于旅行社而言，您可以參考這兩位朋友正在旅行的國(guó)家和地區(qū)，以及他們正望向的海洋的名稱。另一方面，對(duì)于戶外裝備店而言，您可能會(huì)關(guān)注這兩位朋友背包的品牌和特色。
如果您的企業(yè)是一家旅行社，那么效果較差的替代文本示例可能是“兩個(gè)人面朝大海”。對(duì)于相同的旅行社而言，效果較好的替代文本示例可能是“在一個(gè)陽(yáng)光明媚的日子里，兩位好友正在葡萄牙的拉古什旅行，他們一起眺望著卡米洛海灘的沙灘”。
當(dāng)您向您的在線商店添加視頻時(shí)，請(qǐng)確保要考慮到以下客戶群體的需求：視力不佳的客戶、存在聽力障礙或聽力不佳的客戶，或可能易患前庭功能紊亂的客戶。
其中部分客戶依賴屏幕閱讀器的文本到語(yǔ)音轉(zhuǎn)換功能，該功能可大聲朗讀網(wǎng)頁(yè)的內(nèi)容。來自視頻和音樂的附加音頻可能會(huì)使此體驗(yàn)難以實(shí)現(xiàn)，特別是在其意外出現(xiàn)時(shí)。最好為您的視頻添加隱藏式字幕，以便耳聾或有聽力障礙的客戶可以訪問這些內(nèi)容。
前庭功能紊亂的客戶可能會(huì)因?yàn)橛^看移動(dòng)的內(nèi)容而出現(xiàn)眩暈的癥狀。因此，使幻燈片和視頻不會(huì)自動(dòng)播放是非常重要的。
當(dāng)您向您的在線商店添加幻燈片時(shí)，請(qǐng)遵循以下準(zhǔn)則：
不自動(dòng)播放幻燈片。 如果幻燈片自動(dòng)播放，它們應(yīng)包括客戶可以用于暫停或停止幻燈片播放的設(shè)置。
視頻
當(dāng)您向您的在線商店添加視頻時(shí)，請(qǐng)遵循以下準(zhǔn)則：
不自動(dòng)播放視頻。 如果視頻自動(dòng)播放，則其音頻靜音。 對(duì)于包含音頻的視頻，此視頻完全可見，不受其他頁(yè)面元素的阻礙。這能夠使隱藏式字幕保持可見。 對(duì)于包含對(duì)話的視頻，可以使用文本聽錄稿。這些聽錄稿可包含在頁(yè)面上，或包含在可通過鏈接訪問的單獨(dú)頁(yè)面中。這些準(zhǔn)則也適用于幻燈片中的視頻。
視力或運(yùn)動(dòng)存在障礙的客戶可能會(huì)使用鍵盤進(jìn)行在線導(dǎo)航和完成任務(wù)。這些客戶依靠可視的指示器來傳達(dá)他們的鍵盤焦點(diǎn)在網(wǎng)頁(yè)上的位置。在以下示例中，電子郵件字段具有一個(gè)可視的焦點(diǎn)指示器：
如果您要編輯模板的樣式表，請(qǐng)確保沒有從任何頁(yè)面元素中刪除鍵盤焦點(diǎn)樣式。請(qǐng)遵循以下準(zhǔn)則：
當(dāng)所有交互式頁(yè)面元素都有鍵盤焦點(diǎn)時(shí)，它們都有一個(gè)清晰的可視指示器。這些元素包括鏈接、按鈕和表單字段。
