說明
登入

佈景主題的無障礙功能

自訂佈景主題時，請在設計與內容上做出有助於維持網路商店無障礙使用的選擇。無障礙網站的設計旨在讓每個人都能使用，包括身心障礙者。以無障礙為考量來為您的網路商店做出選擇，有助於為所有顧客提供包容性的體驗。

下方指引是以 網頁內容無障礙指引 (WCAG) 為基礎制定。由於打造無障礙網站需要考量的因素眾多，僅遵循下方指引並無法保證您的網路商店完全具備無障礙功能。您可以造訪 WCAG 網站，或查看 下方列出的資源 以瞭解更多。

本頁內容

文字無障礙

讓您的網路商店文字易於閱讀，對視覺受損的顧客或不易閱讀密集文字的顧客而言十分重要。

顏色對比

編輯網路商店的配色時，請確保所有文字對色盲或其他視覺受損的顧客也可無障礙使用。這些顧客仰賴足夠的顏色對比來區分不同元素。您可以使用線上的 對比度比例工具，檢查商店各部分的對比度。

以下範例中，該文字與背景的對比度比例為 2.4:1，對部分顧客而言較難閱讀。

一段淺灰色文字，背景為純白色。

下一個範例中，該文字的對比度比例為 4.8:1，對多數顧客而言更容易閱讀。

一段深灰色文字，背景為純白色。

測試所有文字的對比度，包括內文、標題、連結與表單欄位。請遵循以下準則：

  • 內文與按鈕文字的顏色，與其背景的對比度比例至少為 4.5:1。
  • 標題與其他大型文字 (字型大小 24 px 以上) 的顏色，與其背景的對比度比例至少為 3:1。
  • 置於圖片上的所有文字 (包含素材輪播、橫幅與影片) 與背景之間需有足夠的對比度。大型文字 (字型大小 24 px 以上) 的對比度至少為 3:1；較小文字的對比度至少為 4.5:1。
  • 非文字元素的顏色 (包含輸入欄位邊框與圖示) 與其背景的對比度至少為 3:1。

文字標題

使用 豐富文字編輯器 在頁面加入標題時，請務必依序使用標題階層 (1 至 6)。輔助技術會藉由標題來傳達頁面內容的組織方式。跳過階層，例如在第 2 級標題之後直接使用第 4 級標題，可能會讓使用者感到困惑。請遵循以下準則：

  • 標題應依序使用，不應跳過階層。

文字大小與對齊

當您編輯佈景主題的文字排版設定時，請確保文字大小足以讓顧客舒適閱讀。

文字的字距與詞距也應一致，讓內容易讀。以下範例的文字對齊為左右對齊，會造成詞距不一致。

一段左右對齊的文字。每行文字填滿整個寬度，為了排版而使詞距大小不一。

下一個範例中，文字採靠左對齊，因此詞距一致。

一段靠左對齊的文字。各詞之間的間距一致。

自訂文字大小與對齊方式時，請遵循以下準則：

  • 正文字的最低字型大小至少應相當於 16 px。
  • 文字對齊不使用左右對齊。左右對齊會造成詞距不一致。

文字連結

文字連結應加底線，或採用與一般文字可明顯區分的其他視覺樣式。由於部分顧客辨識顏色有困難，請勿僅以顏色改變來區分連結與一般文字。

文字連結應在同一分頁開啟。連結在新分頁或視窗開啟容易造成混淆，尤其在行動裝置上舊視窗不易看見，而且對顧客不夠包容，特別是使用螢幕放大或對技術較不熟悉的顧客。

若您編輯佈景主題的樣式表，請務必不要移除文字連結的樣式。請遵循以下準則：

  • 文字連結需加底線，或以非僅靠顏色的其他視覺區別，讓顧客能區分連結與一般文字。
  • 點選文字連結時，會在同一分頁開啟。

圖片的替代文字

當您在網路商店新增圖片時，務必讓圖片符合無障礙需求，以照顧失明或低視能的顧客。您可以加入準確描述每張圖片的替代文字。使用螢幕閱讀器的顧客仰賴替代文字來傳達網路商店中圖片的內容。

您可以從 Shopify 管理介面為商品圖片新增替代文字。您可以從佈景主題編輯器為主題中的其他圖片新增替代文字。

為圖片新增替代文字時，實用的做法是想像您正在向閉上眼睛的人描述圖片，幫助他們在腦海中建立畫面。描述方式也會依您的網頁脈絡而不同。例如，若您的業務是旅行社，與戶外用品商店相比，您可能會以不同的方式描述圖片。請參考以下圖片：

兩位朋友背著背包，互相摟著肩膀，眺望海洋

對旅行社而言，您可能會提及兩位朋友旅行的國家/地區，以及他們所看的海洋或海域名稱。相反地，對戶外用品商店而言，您可能會著重於兩人背包的品牌與功能。

若您的業務是旅行社，不佳的替代文字範例可能是：「兩個人在海洋前方。」對同一家旅行社而言，良好的替代文字範例可能是：「兩位朋友在葡萄牙拉各斯旅行，在晴朗的一天眺望 Praia do Camilo 的沙質海灣。」

素材輪播與影片的無障礙功能

在網路商店加入影片時，請務必考量低視能顧客、失聽或聽力受損的顧客，或可能有前庭障礙的顧客的需求。

部分顧客仰賴螢幕閱讀器的文字轉語音功能來朗讀網頁內容。影片或音樂的額外音訊，尤其在毫無預期時，會讓這種使用體驗變得困難。對於失聽或聽力受損的顧客，替影片加上隱藏式字幕是好作法，讓這些顧客能存取內容。

有前庭障礙的顧客在看到動態內容時可能會感到眩暈。因此，素材輪播與影片不應自動播放，並且顧客必須能透過控制按鈕操作輪播。

素材輪播

在網路商店加入素材輪播時，請遵循以下準則：

  • 素材輪播不會自動播放。
  • 若素材輪播會自動播放，則必須提供輪播控制，讓顧客能暫停、前進或停止輪播。

影片

在網路商店加入影片時，請遵循以下準則：

  • 影片不會自動播放。
  • 若影片會自動播放，音訊必須靜音。
  • 含有音訊的影片必須完整可見，不得被其他頁面元素遮蔽，以確保隱藏式字幕保持可見。
  • 含有對話的影片必須提供文字逐字稿，這些內容可以直接放在頁面上，或以連結指向另一個頁面。

上述準則同樣適用於素材輪播中的影片。

鍵盤支援

視覺或肢體行動受限的顧客可能會使用鍵盤瀏覽並完成線上操作。這些顧客仰賴視覺指示來辨識鍵盤焦點在網頁上的位置。以下範例中，電子郵件欄位有可見的焦點指示：

網路商店的顧客登入畫面，顯示電子郵件與密碼的表單欄位。電子郵件欄位以藍色外框標示。

若您編輯佈景主題的樣式表，請務必不要移除任何頁面元素的鍵盤焦點樣式。請遵循以下準則：

  • 所有可互動的頁面元素在具有鍵盤焦點時，都必須有清楚的視覺指示。這些元素包括連結、按鈕與表單欄位。

資源

若要進一步瞭解本文所討論主題的網站無障礙功能，請參考以下資源。

色彩對比資源

文字相關資源

替代文字資源

素材輪播與影片資源

鍵盤支援資源

本節內容