無障礙佈景主題
自訂佈景主題時，建議選用有助於保持您網路商店可無障礙使用的設計和內容。無障礙網站是以能讓所有人都能使用的方式所設計，包括殘疾人士也不例外。建議您為網路商店選擇可無障礙使用的設計，為所有顧客帶來面面俱到的周全體驗。
下方準則在建立時，已將網頁內容無障礙規範 (WCAG) 納入考量。由於建立無障礙網站時必須考量許多因素，因此僅靠下方守則並不能保證您的線上商店完全無障礙。您可造訪 WCAG 網站或參考下方所列出的資源，進一步瞭解無障礙網頁。
秘訣：若您為開發人員，則您可以使用 Shopify 工具和最佳做法，進一步最佳化您的無障礙佈景主題。請在 Shopify.dev 上瞭解詳情。
此頁面上
文字無障礙功能
對於視力受損或難以閱讀密集文字段落的客戶，讓他們能夠閱讀您線上商店的文字是相當重要的。
色彩對比度
編輯線上商店的色彩時，請務必確保色盲或視障客戶都能存取所有文字。這些客戶需要充分的色彩對比度才能在視覺上區別事物。您可以使用線上對比率工具來檢查商店個部份的對比度。
在下面的範例中，文字對背景的對比率為 2.4:1，因此讓某些客戶難以閱讀。
在下一個範例中，文字的對比率為 4.8:1，能讓許多顧客更容易閱讀。
測試所有文字的對比度，包括正文文字、標題、連結和表單欄位。請使用以下準則：
- 正文文字和按鈕文字對其背景的對比率至少為 4.5:1。
- 標題和大型文字 (字體大小 24 px 以上) 的色彩對其背景的對比率至少為 3:1。
- 圖片上所有文字 (包括素材輪播、橫幅和影片) 的色彩對背景的對比率足夠。針對大型文字 (字體大小 24 像素以上)，對比率至少為 3:1。針對較小的文字，對比率至少為 4.5:1。
- 非文字元素的色彩 (包括輸入邊界和圖示) 對背景的對比率至少為 3:1。
秘訣：在部分佈景主題中，您可以在文字和圖片之間放置色彩疊加層來改善文字的對比度和可讀性。
文字標題
當您使用 RTF 文字編輯器將標題新增至頁面時，請務必確保其按照順序 (1 - 6)。輔助技術會使用標題表示安排頁面內容的方式。跳級 (例如標題使用 2 級，另一個標題使用 4 級) 可能會使顧客感到困惑。請遵循以下準則：
- 標題按照順序使用，且不會跳級。
文字大小和對齊
當您編輯佈景主題的字體設定時，請務必確保您的文字大小可讓客戶輕鬆閱讀。
文字也應在字詞和字母之間保持一致的間距以便閱讀。在下面的範例中，文字為左右對齊，因此導致字詞之間的間距不一。
在下面的範例中，文字為靠左對齊，因此字詞之間的間距一致。
當您自訂文字的尺寸和對齊時，請遵循下列準則：
- 正文文字的大小下限等於 16 px。
- 文字並非左右對齊。左右對齊文字會導致字詞之間的間距不一。
文字連結
當您為文字新增連結時，請確保所有顧客均能辨別連結。由於部分顧客無法分辨顏色，因此您無法只透過顏色來區分連結和一般文字。連結文字應該加底線，如此即無須透過變更顏色來表示此文字為連結。
若您編輯佈景主題樣式表，請確保您並未移除文字連結樣式。請遵循以下準則：
- 文字會加上底線或者使用其他視覺區別，以與一般文字區別。
圖片的替代文字
將圖片新增至線上商店時，請務必讓失明或視障客戶可以存取這些內容。方法是加入準確描述每張圖片的替代文字。使用螢幕閱讀器的客戶，可借助替代文字來瞭解您線上商店中的圖片內容。
您可以在 Shopify 管理介面為產品圖片新增替代文字。您可以從佈景主題編輯器為佈景主題的其他圖片新增替代文字。
當您將替代文字新增至圖片時，有個好方法是假裝您正在向閉上眼睛的人描述圖片，協助他們在心中想像圖片。您描述圖片的方式也取決於您網頁的內容。例如，若您經營旅行社，您描述圖片的方式可能會與經營戶外用品店時所使用的描述方式不同。請考量下列圖片：
若為旅行社，您可能會提到這兩位好友旅遊的國家和地區，以及他們看著的海洋名稱。另一方面，若為戶外用品店，您可能會著眼於他們的背包品牌和功能。
若您經營旅行社，像「兩個人面對大海」這樣的替代文字就不太好。對這間旅行社而言，不妨使用「兩位好友在葡萄牙拉古什旅遊，在陽光下遠眺 Praia do Camilo 的沙灣」這樣的替代文字。
無障礙素材輪播和影片
當您將影片新增至線上商店時，請務必考量弱視、聾啞或聽障客戶，或者易患前庭疾病客戶的需求。
某些客戶需要螢幕助讀程式的文字轉換語音功能，此功能會大聲讀出網頁內容。影片和音樂的額外音訊可能會導致體驗不佳，尤其是在未預料到的情下突然播出聲音。對於聽障或重聽的客戶，建議您為影片新增隱藏式字幕，以便這些客戶存取內容。
有前庭功能障礙的客戶可能會因移動的內容而感到暈眩，因此請勿讓素材輪播和影片自動播放。
素材輪播
當您將素材輪播新增至線上商店時，請遵循下列準則：
- 素材輪播不會自動播放。
- 若素材輪播會自動開始播放，則其中可能包含可讓客戶暫停或停止素材輪播片的設定。
影片
當您將影片新增至線上商店時，請遵循下列準則：
- 影片不會自動播放。
- 若影片自動播放，則音訊為靜音。
- 針對包含音訊的影片，影片會完整顯示且未遭到其他頁面元件遮擋。這可保持隱藏式字幕可見。
- 針對包含對話的影片提供逐字稿。這些逐字稿位於頁面上或者其他頁面的連結。
這些準則也適用於投影片中的影片。
鍵盤支援
有視力或運動障礙的客戶可能會使用鍵盤來在線上瀏覽及完成工作。這些客戶需要視覺指示來瞭解網頁上的鍵盤焦點在何處。在下面的範例中，「電子郵件」欄位包括視覺焦點指示：
若您編輯佈景主題的樣式表，請確保您並未從任何頁面元件中移除鍵盤焦點樣式。請遵循以下準則：
- 互動式頁面元件在包含鍵盤焦點時具有清楚的視覺指示。這些元件包括連結、按鈕和表單欄位。
資源
若要針對本文探討的主題深入瞭解無障礙網頁，請參考下列資源。
色彩對比資源
- 《對比度佳的色彩》是來自無障礙網頁倡議 (Web Accessibility Initiative) 的文章
- 您可以使用對比率線上工具來找出兩種色彩之間的對比率
- 色彩對比分析器對比率應用程式由 Paciello Group 所開發，可供下載
文字資源
- 《16 像素字體：正文專用。使用小於此字體的代價高昂》(來自 Smashing 雜誌的文章)
- 《文字對齊》(來自 Web AIM 的文章)
- 《連結外觀》(來自 Web AIM 的文章)
- 《針對內容架構使用標題》(來自 Web AIM 的文章)
替代文字資源
- 《文字轉換語音》(來自無障礙網頁倡議 (Web Accessibility Initiative) 的文章)
- 《替代文字》(來自 Web AIM 的文章)
- 《撰寫替代文字時的考量事項》(位於 Medium 的文章)
投影片和影片資源
- 《前庭疾病入門》，來自 The A11Y Project 的文章
- 《文字轉換語音》(來自無障礙網頁倡議 (Web Accessibility Initiative) 的文章)
- 《影片字幕》，來自無障礙網頁倡議 (Web Accessibility Initiative) 的文章
- 《使用自動字幕》，來自 YouTube 說明的文章
- 《字幕》，來自 Vimeo 說明中心的文章