自定義模板時,請選擇有助于保持在線商店可訪問性的設計和內容。設計易于訪問的網站,以便每個人都可以使用該網站,包括殘疾人。通過為在線商店選擇可保證可訪問性的選項,您可以為您的客戶提供包容性體驗。
創建以下指南時充分考慮了 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 后臺將替代文本添加到產品圖片。您可以通過模板管理器將替代文本添加到模板中的其他圖片。
在將替代文本添加到圖片時,假設您要向閉著眼睛的人描述圖片是一個好的做法。幫助他們在腦海中形成一張圖片。您描述圖片的方式也取決于網頁的內容。例如,如果您的企業是一家旅行社,那么您描述圖片的方式可能與當您的企業是一家戶外裝備店時有所不同。
對于旅行社而言,您可以參考這兩位朋友正在旅行的國家和地區,以及他們正望向的海洋的名稱。另一方面,對于戶外裝備店而言,您可能會關注這兩位朋友背包的品牌和特色。
如果您的企業是一家旅行社,那么效果較差的替代文本示例可能是“兩個人面朝大海”。對于相同的旅行社而言,效果較好的替代文本示例可能是“在一個陽光明媚的日子里,兩位好友正在葡萄牙的拉古什旅行,他們一起眺望著卡米洛海灘的沙灘”。
當您向您的在線商店添加視頻時,請確保要考慮到以下客戶群體的需求:視力不佳的客戶、存在聽力障礙或聽力不佳的客戶,或可能易患前庭功能紊亂的客戶。
其中部分客戶依賴屏幕閱讀器的文本到語音轉換功能,該功能可大聲朗讀網頁的內容。來自視頻和音樂的附加音頻可能會使此體驗難以實現,特別是在其意外出現時。最好為您的視頻添加隱藏式字幕,以便耳聾或有聽力障礙的客戶可以訪問這些內容。
前庭功能紊亂的客戶可能會因為觀看移動的內容而出現眩暈的癥狀。因此,使幻燈片和視頻不會自動播放是非常重要的。
當您向您的在線商店添加幻燈片時,請遵循以下準則:
不自動播放幻燈片。 如果幻燈片自動播放,它們應包括客戶可以用于暫停或停止幻燈片播放的設置。
視頻
當您向您的在線商店添加視頻時,請遵循以下準則:
不自動播放視頻。 如果視頻自動播放,則其音頻靜音。 對于包含音頻的視頻,此視頻完全可見,不受其他頁面元素的阻礙。這能夠使隱藏式字幕保持可見。 對于包含對話的視頻,可以使用文本聽錄稿。這些聽錄稿可包含在頁面上,或包含在可通過鏈接訪問的單獨頁面中。這些準則也適用于幻燈片中的視頻。
視力或運動存在障礙的客戶可能會使用鍵盤進行在線導航和完成任務。這些客戶依靠可視的指示器來傳達他們的鍵盤焦點在網頁上的位置。在以下示例中,電子郵件字段具有一個可視的焦點指示器:
如果您要編輯模板的樣式表,請確保沒有從任何頁面元素中刪除鍵盤焦點樣式。請遵循以下準則:
當所有交互式頁面元素都有鍵盤焦點時,它們都有一個清晰的可視指示器。這些元素包括鏈接、按鈕和表單字段。