WooCommerce 商店的無障礙提示
概述
雖然 WooCommerce 提供無障礙基礎,但商店經營者在建立包容性體驗中扮演關鍵角色。本頁提供改善商店內容、設計與自訂的無障礙提示與最佳實務。
在世界許多地區,電商網站依法必須符合無障礙標準。讓商店具備無障礙功能不僅能提升客戶體驗,也能協助你遵守法律,例如美國的美國身心障礙者法案(ADA)與歐洲無障礙法案(EAA)。大多數法規參照 WCAG 2.2 Level AA 標準,該標準定義可測量的無障礙要求。
使用描述性替代文字
為商品圖片與其他視覺元素新增描述性替代文字。這能協助螢幕閱讀器使用者理解圖片的用途與情境。
避免將替代文字留空,除非圖片是裝飾性質。如果是裝飾性圖片,請將替代文字欄位留空,讓螢幕閱讀器跳過。商品圖片與連結圖片絕不是裝飾性質。
清楚標示表單欄位
如果要新增自訂表單(例如使用擴充功能),請確保：
- 每個欄位都包含可見且程式化的標籤。
- 不要僅依賴佔位文字,因為使用者輸入時會消失。
標籤應清楚描述欄位用途,相關指示應靠近輸入欄位。錯誤訊息應使用 ARIA 屬性程式化地連結至相關輸入欄位,並由螢幕閱讀器宣告。
選擇支援無障礙的主題
主題對無障礙功能有重大影響。選擇在 WordPress 儲存庫中標記為支援無障礙的主題,這些主題符合既定的無障礙標準。
擁有此標記的主題已通過 WordPress 的無障礙審查,該審查檢查鍵盤導航、色彩對比與其他 WCAG 標準。
如果選擇 WordPress.org 以外的主題,在選擇前請向開發者索取無障礙符合性報告或其他無障礙文件。
減少動態效果與自動播放
避免自動播放輪播、影片或動畫,除非使用者可以暫停或停用。這些效果可能對有前庭或認知障礙的使用者造成困擾。
動畫應尊重使用者作業系統中的「減少動態」設定。你可以在 macOS 或 Windows 啟用「減少動態」選項,並檢查網站是否抑制非必要動態來測試。以下是在電腦啟用減少動態以進行測試的方式：
- Windows 11：前往_設定 > 協助工具 > 視覺效果 > 動畫效果_。
- macOS：前往_系統偏好設定 > 輔助使用 > 顯示器 > 減少動態_。
使用實際工具測試
使用無障礙評估工具或執行手動測試：
- 僅使用鍵盤瀏覽網站：使用 Tab 鍵在所有按鈕、連結與表單欄位間切換,使用 Enter 鍵觸發按鈕與連結。確保不使用滑鼠即可搜尋商品、將商品加入購物車並完成結帳。
- 使用螢幕閱讀器或瀏覽器擴充功能,例如 WAVE 或 axe DevTools,或 WordPress 無障礙外掛如 Equalize Digital Accessibility Checker 來識別問題。
- 嘗試放大至 200% 或 400% 以確保所有內容仍可讀取,且沒有元素重疊或消失。
- 使用免費螢幕閱讀器測試網站,例如 NVDA(Windows)或 VoiceOver(Mac),以更了解視障使用者如何體驗你的商店。
已知限制與因應方式
注意以下常見限制及緩解方式：
- 第三方擴充功能：並非所有擴充功能都同樣具備無障礙功能。實作前請檢查文件或測試。
- 自訂區塊：如果使用或建立自訂區塊,請遵循語意化 HTML 與無障礙最佳實務。
- 網站特定自訂：自訂程式碼(JS/CSS)可能無意中影響無障礙功能。變更後務必重新測試相關流程。
- 如果自訂包含色彩選項,請使用線上對比檢查器測試對比。例如,確保按鈕文字與背景色彩具備可讀性。考慮在設定產生無障礙問題的組合時透過管理介面警告使用者。
工具與資源
商店經營者適用的工具與參考資料：
回饋與貢獻
我們歡迎商店經營者提供建議與回饋。如果發現無障礙問題或有改善建議,請寄信至 accessibility@woocommerce.com。你的意見協助我們支援更包容的網路。