📖 學（核心）
無障礙設計（Accessibility,簡稱 a11y,因為 a 和 y 之間有 11 個字母)不是「幫身障者做的特殊功能」,而是「讓所有人都能用的基本工程品質」。全球標準是 W3C 的 WCAG(Web Content Accessibility Guidelines),目前主流版本是 2022 年底發布的 2.2,建構在四大原則之上,英文簡稱 POUR:Perceivable(可感知)、Operable(可操作)、Understandable(可理解)、Robust(穩健)。每一條 Success Criteria 都分 A、AA、AAA 三個等級,業界與多數法規(包含台灣的政府網站無障礙規範)實務上以 AA 為基準線。WCAG 2.2 新增了 9 條成功準則,重點放在低視力使用者、認知與學習障礙者、以及動作障礙者(尤其是觸控裝置操作),例如更嚴格的焦點可見度要求、互動元素最小尺寸、以及「無障礙驗證」(登入不該強迫使用者解謎題或死記複雜資訊)。
對比度與鍵盤導覽是最容易被忽略、卻影響最多人的兩塊。WCAG AA 要求一般文字對背景至少 4.5:1 對比度,大字體(18pt 以上或 14pt 粗體)至少 3:1,圖形與 UI 元件邊框至少 3:1。這件事不需要靠感覺判斷,WebAIM 的 Contrast Checker 直接輸入前景色與背景色的色碼就能得到精確比值與 AA/AAA 判定。鍵盤導覽則是驗證一個介面是否真正可操作的照妖鏡:每一個滑鼠能做的操作,鍵盤都要能做到(點擊對應 Enter/Space,hover 顯示的內容也要能用 focus 觸發或提供替代方式)。所有可互動元素都必須有清楚可見的焦點樣式,絕對不能只是把瀏覽器預設的 outline 拿掉卻沒有替換成同樣明顯的自訂樣式。Tab 鍵移動順序應該跟畫面上的視覺與邏輯順序一致,盡量倚賴自然的 DOM 順序,而不是到處手動調整 tabindex。
ARIA(Accessible Rich Internet Applications)是用來補足語意的工具,不是萬靈丹——原則是「能用原生 HTML 元素就別用 ARIA」,例如 button 天生就有正確的角色、可聚焦、可用鍵盤觸發,硬要用 div 加 role=“button” 反而要自己補齊一堆行為。當元素缺乏清楚文字說明時,才用 aria-label、aria-labelledby、aria-describedby 補充語意給螢幕閱讀器使用者。像 Modal 對話框這種元件,需要在開啟時把焦點鎖在對話框內(focus trap),按 Esc 能關閉,關閉後焦點要送回原本觸發它的按鈕上,這一連串行為如果沒做好,螢幕閱讀器使用者很容易「卡在」看不到、找不到出路的畫面裡。動態內容更新(例如載入中、表單送出後的錯誤訊息)則需要透過 aria-live 區域主動宣告,不然畫面看得到,螢幕閱讀器使用者卻完全不知道發生了什麼事。
無障礙設計最終能回歸到一句話:可及性即好設計。你為視障使用者做的清楚焦點樣式,對用滑鼠但眼睛容易疲勞的人也有幫助;你為肢體障礙使用者做的完整鍵盤支援,對重度使用快捷鍵的重度用戶(power user)一樣受用;你為認知障礙使用者簡化的表單流程,對所有趕時間的使用者都更好用。把 a11y 當成產品品質的一部分,而不是上線前臨時補的合規檢查清單,才是長久之計。
🧠 記
- WCAG 四大原則 POUR:可感知、可操作、可理解、穩健,每條準則分 A / AA / AAA 三級。
- 業界與法規實務基準線是 WCAG 2.2 Level AA,不是最高的 AAA。
- 一般文字對比度至少 4.5:1,大字體至少 3:1,UI 元件邊框至少 3:1。
- 每個滑鼠能做的操作,鍵盤都必須能做到,且要有清楚可見的焦點樣式。
- 能用原生 HTML 語意元素(button、a、input)就別用 div 加 ARIA 硬做。
- Modal 要做到:開啟鎖焦點、Esc 可關閉、關閉後焦點送回觸發按鈕。
- 動態內容變化(載入中、錯誤訊息)要靠 aria-live 區域主動通知螢幕閱讀器。
- 無障礙不是身障者專屬功能,而是所有使用者都受益的基本工程品質。
✍️ 實踐
- 挑一個你正在做的頁面,用 WebAIM Contrast Checker 逐一檢查主要文字色與按鈕色的對比度,標出所有低於 4.5:1 的地方。
- 把滑鼠收起來,只用 Tab / Shift+Tab / Enter / Esc 走一遍整個頁面流程,記錄哪些地方「看得到但按不到」或「焦點消失看不出在哪」。
- 檢查頁面裡所有非原生互動元素(自訂 dropdown、tab、modal),對照 The A11Y Project Checklist 確認 ARIA role 與鍵盤行為是否補齊。
- 找一個表單或送出流程,關掉螢幕畫面用螢幕閱讀器(如 VoiceOver 或 NVDA)聽一遍,確認錯誤訊息與載入狀態有沒有被正確唸出來。
- 把這次抓到的問題整理成清單,依「阻斷操作」「體驗變差」「錦上添花」分優先順序,先修阻斷操作的項目。
🔗 延伸學習
- Web Content Accessibility Guidelines (WCAG) 2.2
- WCAG 2 Overview - W3C Web Accessibility Initiative (WAI)
- WebAIM: Contrast Checker
- Checklist - The A11Y Project
💬 問 AI
我正在做｛請填入你的頁面/功能名稱｝,想請你幫我檢查無障礙設計問題。
情境:｛請填入使用情境,例如登入表單、圖片輪播、下拉選單｝
目前作法:｛請填入目前的實作方式或元件結構｝
請幫我對照 WCAG 2.2 AA 標準,指出可能的對比度、鍵盤操作、ARIA 語意問題,並給出具體修改建議。