WooCommerce 外掛的無障礙功能
概述
WooCommerce 建立於 WordPress 之上，而 WordPress 遵循嚴格的無障礙編碼標準。
WooCommerce 外掛延續這些做法，並加入自身的無障礙功能，以確保與螢幕閱讀器及純鍵盤導航等輔助技術相容。本頁概述外掛內建的無障礙功能。
注意：許多地區的法律規定電商網站必須具備無障礙功能。確保你的商店符合無障礙標準有助於遵守相關法規，例如美國的美國身心障礙者法案(ADA)，以及適用於所有歐盟成員國的歐洲無障礙法案(EAA)。其他國家也有無障礙相關法律，建議查看全球網路無障礙法規以確保符合當地要求。
相關指引請參考WooCommerce 商店無障礙提示。
鍵盤導航
使用 WordPress 搭配支援無障礙的主題時，WooCommerce 支援完整的鍵盤導航，讓使用者僅使用鍵盤即可瀏覽介面：
- 結帳、購物車與表單的標籤順序符合邏輯。
- 明確的焦點指示器顯示目前選取的元素。
- 所有互動元件(按鈕、下拉選單、切換)無需滑鼠即可使用。
- 按鈕可透過空白鍵與 Enter 鍵操作，連結可透過 Enter 鍵啟用。對話框與模態視窗開啟時會正確保持鍵盤焦點。
請注意，主題樣式可能會覆蓋 WooCommerce 的設定，因此你也需要確認網站使用的主題支援無障礙功能。
螢幕閱讀器相容性
WooCommerce 使用語意化 HTML 與 ARIA 角色，確保螢幕閱讀器使用者能夠瀏覽並理解網站內容：
- 表單、按鈕與互動元素都有清楚的標籤。
- 動態更新(例如購物車總額、驗證訊息)使用 ARIA live regions 進行宣告。
- 頁面結構使用標題、清單與地標來傳達內容層次。
- 元素具有正確的角色：按鈕會被宣告為按鈕，連結會被宣告為連結，表單欄位包含適當的標籤與狀態，例如「已按下」或「已展開」。
無障礙表單元素
表單(特別是結帳流程)採用無障礙設計：
- 每個輸入欄位都有描述性的
- 必填欄位有明確標示，錯誤訊息會以視覺與程式方式傳達。你可能需要確認主題也支援此功能。
- 指示與欄位群組對螢幕閱讀器友善。
請注意，修改 WooCommerce 結帳體驗的主題與第三方外掛可能會破壞無障礙功能。如果你的結帳頁面經過修改，請檢查確保可見標籤、必填指示器與錯誤訊息仍然存在。
錯誤訊息與驗證回饋
WooCommerce 外掛以無障礙方式處理表單錯誤：
- 錯誤訊息顯示在相關欄位附近。
- ARIA 屬性將錯誤訊息與對應的輸入欄位連結。
- 即時驗證協助使用者修正問題，無需重新送出表單。
- 成功與錯誤訊息也會透過 ARIA live regions 由螢幕閱讀器宣告。
ARIA 角色與地標
ARIA 角色提升螢幕閱讀器使用者的體驗：
- 外掛控制的版面區域標示為 main、navigation 與 region 等角色，並具有唯一名稱。
- 可摺疊選單與模態視窗等互動元素使用 ARIA 狀態(例如 aria-expanded)。
- Live regions 會在內容動態變更時更新使用者。
WooCommerce Blocks 與網站編輯器
用於商品清單、購物車與結帳的 WooCommerce blocks 採用無障礙設計：
- 使用 HTML5 語意化元素。
- 完整支援鍵盤與螢幕閱讀器。
- 遵循 WordPress 無障礙指南建立。
注意：部分較舊的已棄用區塊可能僅提供有限的無障礙支援，可能需要測試或額外設定。我們鼓勵你在新區塊推出時更新，並避免使用已棄用的區塊以改善無障礙功能與特性。
其他無障礙考量
- 縮放支援：WooCommerce 相容於瀏覽器縮放設定最高達 400%。內容保持可讀與可互動，不會重疊或失去功能。
- 動態敏感度：動畫會尊重使用者作業系統中的 prefers-reduced-motion 設定(適用時)。
- 無障礙預設值：開箱即用的設定符合 WCAG Level AA 色彩對比與可用性要求。
- 螢幕閱讀器測試：WooCommerce 使用 VoiceOver(macOS)、JAWS(Windows)與 NVDA(Windows)等螢幕閱讀器進行測試。
回饋與貢獻
我們歡迎關於 WooCommerce 無障礙功能的回饋。如果你遇到問題或有建議，請寄信至 accessibility@woocommerce.com。無障礙功能是我們持續優先關注的項目，你的意見協助我們為所有人建立更好的體驗。