以 Shopify 實現無障礙

Shopify 的佈景主題與 App 決定了無障礙程度。結帳流程大致由 Shopify 給定。

常見的問題來源

對比度過低的佈景主題配色、沒有 alt 文字的產品圖片、沒有鍵盤操作的評價與彈出視窗應用程式、只在停留時展開的大型選單、沒有暫停的輪播。Shopify 核心通常不是問題——問題在於佈景主題、應用程式以及在富文字編輯器裡建立的內容。

檢查並選擇佈景主題

佈景主題決定對比度、可見焦點、標題結構以及選單和篩選的鍵盤操作。選擇前的標準：用 Tab 鍵走一遍首頁、一個系列和一個產品頁——焦點是否始終可見？選單能否不用滑鼠開啟？文字和按鈕的對比度是否至少 4,5:1？Online Store 2.0 的預設佈景主題（Dawn 及其衍生）是穩妥的起點；對於付費佈景主題，在展示上做鍵盤測試、並向供應商索取無障礙說明會有幫助。

產品圖片、選項與富文字

為後台裡的每張產品圖片提供一段描述內容的 alt 文字——不是檔名。選項圖片同理。以圖形形式燒進徽章或橫幅裡的文字（「促銷」「僅限今日」）對螢幕閱讀器不可見；使用真正的文字。在產品描述的富文字編輯器裡乾淨地使用標題層級（不要只是把文字放大），清單用真正的清單。

應用程式與嵌入式小工具

評價、彈出視窗、追加銷售和 Cookie 橫幅類應用程式常常注入自己的小工具，困住鍵盤焦點、沒有標籤，或顯示無法關閉的覆蓋層。用鍵盤逐一測試每個應用程式；輪播和倒數計時類應用程式需要一個暫停，且不得讓任何東西閃爍。以應用程式形式提供的無障礙覆蓋層不解決結構性問題，並受到身心障礙權益組織的批評。拿不準就移除該應用程式。

結帳：Shopify 規定什麼、不規定什麼

Shopify 的標準結帳由 Shopify 維護，大部分依無障礙方式建構——你在那裡的調整空間不大。你能影響的是：結帳擴充功能和自訂欄位（禮物留言、年齡驗證）可能干擾鍵盤或螢幕閱讀器的使用，而通往結帳的路徑——購物車、折扣碼輸入框、運送選擇——在佈景主題裡。這些步驟也要測試。

測試與常見問題

快速測試：只用鍵盤操作首頁、一個系列和一個產品頁，在瀏覽器裡放大到 200%，執行一個擴充功能如 WAVE 或 axe DevTools。a11yglass 的免費掃描還會檢查所交付的 HTML 的對比度、alt 文字、標籤、語言和結構。我的 Shopify 商店需要無障礙聲明嗎？通常需要——一個供消費者購買的商店屬於 BFSG 意義上的電子商務；參見關於無障礙聲明的頁面。Shopify 的結帳已經無障礙了嗎？大部分是 Shopify 的責任，但擴充功能可能把它弄壞。哪個佈景主題是無障礙的？沒有認證標章；決定性的是具體情況下的實作。

a11yglass 如何協助

免費掃描會檢查所提供的 HTML 與 CSS，尋找可自動辨識的 WCAG 違規，並為每項發現標明成功準則與一個具體步驟。它可找出約 20–35% 的問題，不能取代完整評估。

繼續閱讀

依現有知識提供的一般資訊，非法律諮詢。個別情況請洽詢專精於資訊科技法的律師事務所。