無障礙性 (Accessibility)
讓介面無需滑鼠、無需完美視力、且無需忍受模糊不清，也能順暢使用。
使用時機
當使用者：
- 想要進行無障礙審查；
- 正在建構表單、導航、模態框或互動式元件；
- 需要 WCAG 指引；
- 想支援鍵盤或螢幕閱讀器；
- 詢問關於對比度或焦點狀態。
1. 定義範圍
- 哪些頁面或元件？
- 哪些使用者群組和輔助技術是重要的？
- 適用哪項標準：WCAG 2.2 AA、內部政策、法律要求？
- 哪些項目不在此次審查範圍內？
2. 檢查基礎項目
語意 (Semantics)
- 使用原生元素：
button、a、input、label、nav、main。 - 不要將
div當成按鈕使用。 - 依序使用標題。
- 為地標和區段提供具可及性的名稱。
鍵盤 (Keyboard)
- 每個可互動元素都能透過 Tab 鍵觸及。
- 焦點順序符合視覺順序。
- 焦點是可見的。
- 沒有鍵盤陷阱。
- Escape 鍵可關閉模態框。
- 在選單、分頁和網格中，方向鍵應如預期運作。
表單 (Forms)
- 每個輸入欄位都有標籤。
- 錯誤訊息會被宣告，並與對應的欄位連結。
- 必填欄位應以文字標示，而非僅用顏色。
- 在適當的地方使用自動完成。
- 說明文字應出現在欄位之前。
圖片與多媒體 (Images and media)
- 有意義的圖片需有替代文字。
- 裝飾性圖片需有空的替代文字。
- 影片需有字幕。
- 音訊需有逐字稿。
- 資訊不應僅透過顏色來傳達。
對比度與文字 (Contrast and text)
- 文字對比度符合 WCAG AA 標準。
- 文字可縮放至 200% 而不會流失資訊。
- 行長與行距應易於閱讀。
- 內容在 320px 寬度下仍能重新排列。
動態內容 (Dynamic content)
- 載入狀態會被宣告。
- 提示訊息和警示使用適當的動態區域。
- 模態框管理焦點。
- 客戶端路由變更會更新標題和焦點。
3. 測試
- 僅使用鍵盤的完整操作流程。
- 若有條件，進行螢幕閱讀器快速測試。
- 將畫面縮放至 200%。
- 高對比度模式。
- 減少動畫效果模式。
- 自動化檢查，但需理解自動化工具僅能找出部分問題。
輸出格式
## 範圍
## 發現
### <嚴重程度>: <問題>
- **位置:** `<路徑或元件>`
- **WCAG:** <規範>
- **影響:** <誰被阻擋以及如何被阻擋>
- **修復:** <具體變更>
- **驗證:** <如何測試>
## 運作良好的部分
## 未測試的部分
## 優先順序
1. ...
規則
- 不得從自動化掃描結果宣稱完全符合 WCAG。
- 不要使用
aria-*來修補不良的語意。 - 不要移除焦點外框，除非有可見的替代方案。
- 不要僅依賴顏色。
- 不要使用僅供螢幕閱讀器使用的類別來取代標籤。
- 如果審查範圍不完整，請說明哪些部分未經測試。
品質檢查清單
- 使用原生語意。
- 鍵盤操作正常。
- 焦點是可見的。
- 表單有標籤和錯誤提示。
- 對比度足夠。
- 動態內容會被宣告。
- 審查報告中說明了哪些部分未經測試。