無障礙佈景主題

當您自訂佈景主題時,建議您選擇有助於保持您商店可無障礙使用的設計和內容。無障礙網站是以能讓所有人都能使用的方式所設計,包括殘疾人士也不例外。要為客戶帶來面面俱到的周全體驗,建議您確保商店可無障礙使用,這一點非常關鍵。

下方準則在建立時,已將網頁內容無障礙規範 (WCAG) 納入考量。由於建立無障礙網站時必須考量許多因素,因此僅靠下方守則並不能保證您的線上商店完全無障礙。您可造訪 WCAG 網站或參考下方所列出的資源,進一步瞭解無障礙網頁。

文字輔助功能

對於視力受損或難以閱讀密集文字段落的客戶,讓他們能夠閱讀您線上商店的文字是相當重要的。

色彩對比度

編輯線上商店的色彩時,請務必確保色盲或視障客戶都能存取所有文字。這些客戶需要充分的色彩對比度才能在視覺上區別事物。您可以使用線上對比率工具來檢查商店個部份的對比度。

在下面的範例中,文字對背景的對比率為 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 所開發,可供下載

文字資源

替代文字資源

投影片和影片資源

鍵盤支援資源

  • 鍵盤相容性》,來自無障礙網頁倡議 (Web Accessibility Initiative) 的文章
  • 焦點簡介》,來自 Google Developers 的文章

準備好開始透過 Shopify 銷售商品了嗎?

免費試用