網站上線前如何做無障礙檢測?給產品團隊的檢查流程
把網站無障礙檢測放進 release 前流程:先用自動化工具找出可被機器偵測的問題,再補上鍵盤操作、焦點、ARIA 與人工檢查。
重點摘要
- 上線前的無障礙檢測應先找出可自動化偵測的 WCAG 與最佳實務問題。
- 接著補上鍵盤操作、焦點順序、互動狀態、ARIA 與內容理解等人工檢查。
- 在台灣語境中,檢測溝通應使用網站無障礙規範、檢測等級、檢測碼、稽核評量碼與成功準則等語彙。
先定義這次 release 要保護的流程
上線前檢測不應只是一張全站掃描報告。比較有效的做法,是先列出這次 release 會影響的主要任務,例如註冊、登入、搜尋、加入購物車、送出表單、下載文件或完成付款。
每個任務都要有明確起點、成功狀態與失敗狀態。這樣檢查時才知道問題會不會真的阻擋使用者,而不是只是在處理一串沒有優先順序的掃描結果。
第一輪:先跑可自動化偵測的問題
自動化檢查適合放在第一輪,因為它可以快速抓出明確、可重複、容易回歸的問題,例如缺少表單標籤、錯誤 ARIA、部分對比不足、標題結構異常或 landmark 使用不清楚。
DevCheck 的實際用途是在目前瀏覽器分頁內檢查 localhost、測試站、登入後頁面與互動後狀態。這和只能掃描公開 URL 的工具不同,因為很多 release 風險在正式公開前就已經存在。
第二輪:只用鍵盤走完主要任務
鍵盤檢查是 release 前最容易被低估的項目。測試時不要只按幾次 Tab 就結束,而是要真的不用滑鼠完成主要任務。
如果焦點看不見、順序跳來跳去、選單打開後無法離開、dialog 關閉後焦點遺失,或自訂元件只能用滑鼠操作,這些通常都應該在上線前處理。
第三輪:確認內容、錯誤與狀態是否能被理解
有些問題不會被掃描工具直接判斷。連結文字是否說得清楚、圖片替代文字是否符合情境、錯誤訊息是否告訴使用者下一步、狀態改變是否被看見或聽見,這些都需要人工判斷。
這一輪的目標不是產生漂亮分數,而是確認使用者在不同操作方式下仍然知道自己在哪裡、發生什麼事、接下來可以做什麼。
哪些問題應該擋 release?
不是每一個無障礙問題都會有同樣風險。比較務實的判斷方式,是先看問題是否阻擋主要任務、是否影響多人或關鍵使用情境、是否容易在元件層被修正,以及是否會讓使用者無法理解錯誤或無法離開目前狀態。
- 主要任務無法不用滑鼠完成。
- 焦點遺失、看不見,或被困在互動元件內。
- 表單錯誤只靠顏色或不提供可操作的修正方向。
- 重要按鈕、連結或欄位沒有可及名稱。
- 自訂元件的角色、狀態和實際互動不一致。
下一步檢查
這篇文章是 DevCheck 上線前檢查路徑的一部分。完成目前檢查後,可以接著看下列任務。
- 跑初步自動化檢查
自動化無障礙檢測能找到什麼,又找不到什麼
用掃描結果找出可機器偵測的問題,同時保留需要人工判斷的部分。
- 檢查鍵盤與焦點路徑
如何檢查鍵盤焦點路徑
確認焦點是否可到達、順序是否合理、是否被困住,以及操作路徑是否符合頁面脈絡。
相關頁面
- Accesserty DevCheck
用瀏覽器內工具檢查本機、測試站、登入後頁面與互動狀態。
- 網站無障礙檢測工具
針對實際頁面、登入後狀態與互動狀態做初步無障礙檢查。
- WCAG 檢測工具
檢視 WCAG A/AA 相關問題、嚴重程度、受影響元素與修正線索。
- 無障礙檢測指南總覽
依實際任務瀏覽公開訊號、上線前檢查、上線後維護與標準限制指南。
- WCAG 術語頁
- ARIA 術語頁
- 自動化檢測限制指南
- 焦點路徑檢查指南
- 可及的身份驗證術語頁