無障礙 audit 可能列出數百項問題,若只按工具嚴重度或頁面順序處理,交易阻斷會和裝飾性 alt 缺漏排在一起。優先級應同時看影響人數、任務重要性、是否完全阻斷、出現範圍和修正依賴。
先保住完整流程:找商品、理解、選擇、加入購物車、登入、付款和取得協助。
第一優先:鍵盤阻斷與 focus
Menu、search、filter、variant、modal、cart 和表單必須能用鍵盤操作,且沒有 keyboard trap。Focus 順序符合閱讀與操作,focus indicator 清楚;sticky header、cookie banner 和 bottom bar 不能遮住 focus。W3C WCAG 2.2明列 Keyboard、No Keyboard Trap、Focus Visible 和 Focus Not Obscured 等準則。
若顧客無法選 variant 或關閉 modal,這是交易阻斷,應在色彩微調前處理。
第二優先:名稱、角色與狀態
Icon button 需要 accessible name,accordion、tab、dialog、combobox 和 quantity control 使用正確語意與 state。Variant 選擇、加入購物車、錯誤和庫存變更要能被 assistive technology 感知,不能只靠畫面顏色或動畫。
優先使用原生 HTML。自行模擬 select、button 或 link 會增加鍵盤與讀屏實作責任。
第三優先:表單與錯誤
搜尋、註冊、地址、付款與聯絡表單有持續可見 label、必要格式和 autocomplete。錯誤發生時指出欄位、用文字描述並提供可行建議;送出後不清空其他資料。錯誤摘要可以連到欄位,狀態訊息適當 announcement。
登入和驗證也需支援密碼管理器與貼上。避免不必要的 cognitive function test,並依 WCAG 2.2 Accessible Authentication 檢查。
第四優先:內容結構與感知
頁面有正確 language、title、heading hierarchy、landmarks、list 和 table。Product image alt 描述選購所需差異,純裝飾圖使用空 alt;圖片裡的關鍵文字在頁面提供等價內容。影片有 captions,必要時提供 transcript 或 audio description。
文字與控制項對比、200% zoom、reflow 和 reduced motion 也要覆蓋。不能用顏色單獨表示促銷、錯誤或缺貨。
第三方 App 同樣在範圍內
評論、客服、推薦、訂閱、cookie consent 和金流 iframe 可能阻斷整頁。記錄供應商、問題、替代流程與修正窗口。供應商短期無法修時,可停用非必要功能或提供 accessible alternative;不能只在報告中標記「third party」。
採購新 App 前把鍵盤、讀屏、zoom 和對比放入驗收。合約也要處理缺陷回報和版本更新。
工具與人工測試分工
自動工具適合找缺 label、對比、HTML 規則等問題,找不到內容是否合理、focus 是否符合任務、讀屏狀態是否可理解。每次發布至少用鍵盤走關鍵流程,定期加入讀屏與身障使用者測試。
建立 issue 時附 WCAG criterion、頁面、元件、重現步驟、實際與預期、受影響任務和證據。元件級問題回到 Shopify 設計系統一次修正多頁,避免逐頁 patch。
建立 accessibility statement 與回報入口,讓顧客能說明遇到的頁面、裝置和任務,客服有清楚 escalation。回報不要求使用者先指出 WCAG 條文,也不能用自動 overlay 代替根本修正。每次重大 Theme 或 App 更新重跑交易旅程,避免舊問題復發。
訓練內容編輯者處理 heading、link text、alt、table 和影片 captions;設計師掌握 focus、對比和 reflow;工程師負責語意與鍵盤。責任分散到交付流程後,無障礙才不會只在年度 audit 出現。
最後以阻斷清零、回歸覆蓋、元件採用和真實任務成功衡量,不用單一 audit 分數宣稱完成。無障礙是持續發布品質,應進入設計、工程、內容與採購流程。