跳至中央內容區塊 :::
:::

WCAG 檢測清單：產品團隊 release 前該看什麼

用產品、設計、QA 與工程都可執行的方式整理 WCAG 檢查：語意、表單、鍵盤、焦點、對比、ARIA、錯誤訊息與動態內容。

重點摘要

  • WCAG 檢測清單應讓團隊能實際執行，而不是只列成功準則編號。
  • 產品、設計、QA 與工程角色都可以先檢查語意、名稱、鍵盤、焦點、錯誤提示與對比。

這份清單的用途

這份 WCAG 檢測清單不是正式檢測報告，也不是用來宣稱網站已完整符合 AA。它的用途是讓產品、設計、QA 與工程在 release 前先擋下常見且會影響使用的問題。

比較好的清單應該能被實際執行，而不是只列成功準則編號。團隊可以先從主要流程頁面開始，再逐步把重複問題回收到元件、內容規則與驗收流程。

結構與名稱

先確認頁面是否能被理解。螢幕閱讀器、鍵盤使用者和搜尋引擎都會受頁面結構影響。這一層的問題通常成本不高，但會大幅影響導覽和理解。

  • 每頁有明確且唯一的頁面標題。
  • 標題階層能反映內容結構，而不是只為了視覺大小。
  • 主要區塊有合理 landmark，例如 header、nav、main、footer。
  • 重要按鈕、連結、表單欄位和圖示按鈕有清楚可及名稱。
  • 圖片替代文字符合內容用途；裝飾圖片不製造噪音。

鍵盤、焦點與互動狀態

鍵盤測試要用真實任務來看。只確認元素能被 Tab 到還不夠，還要確認使用者能不能操作、理解狀態變化，並在需要時離開目前元件。

  • 所有互動元件都能用鍵盤到達與操作。
  • Tab 順序符合畫面與任務邏輯。
  • 焦點提示清楚可見，不被樣式移除或遮住。
  • dialog、menu、accordion、tabs 等元件有合理的焦點管理。
  • 元件展開、收合、選取、錯誤、載入完成等狀態能被理解。

表單、錯誤與完成任務

表單問題通常直接影響轉換、申請、付款與客服流程。檢查時要真的送出錯誤資料，看使用者是否知道哪裡錯、為什麼錯、如何修正。

  • 每個欄位有標籤、必要說明與格式提示。
  • 錯誤訊息不只靠顏色呈現。
  • 錯誤和欄位有清楚關聯，且焦點或摘要能協助使用者回到問題位置。
  • 送出後的成功、失敗與載入狀態清楚。
  • CAPTCHA、驗證碼或身份驗證流程不阻擋部分使用者完成任務。

對比、縮放與真實畫面

對比檢查不只看品牌主色。release 前要在真實頁面狀態中看文字、連結、錯誤、focus、disabled、圖示、邊框與深色或淺色背景。

同時要確認放大、窄螢幕、文字間距改變或使用者系統設定改變時，內容不會重疊、消失或變得不可操作。

相關頁面