設計系統要能規模化，無障礙必須內建而非事後補。當按鈕元件、表單欄位、對話框的對比度、焦點樣式、語意標記都在元件層就寫對，數百個頁面自動繼承正確行為；反之若把無障礙留到上線前用檢測工具補洞，每一個元件的每一次複製都在放大同一個錯誤。無障礙不是慈善加分項，而是可感知、可操作、可理解、穩健這四件事的工程紀律。
📖 學
POUR 四大原則：WCAG 的骨架
WCAG（Web Content Accessibility Guidelines）由 W3C 旗下的 WAI 制定，全部準則掛在四個原則之下，縮寫 POUR：可感知（Perceivable） 指資訊不能只靠單一感官傳遞，文字要有替代方案、影音要有字幕、顏色不能是唯一的區辨手段；可操作（Operable） 指所有功能都能用鍵盤完成、給使用者足夠的時間、不放會誘發癲癇的閃爍；可理解（Understandable） 指內容可讀、介面行為可預測、錯誤能被提示與修正；穩健（Robust） 指標記要相容於現在與未來的輔助技術，語意正確才能被螢幕閱讀器正確解析。任何一條成功準則都能追溯到這四個字，記住 POUR 就抓住了整個規範的地圖。
A / AA / AAA 三級與對比度門檻
WCAG 把每條成功準則分成三個符合等級：A 是最低門檻，缺了會讓部分使用者完全無法使用；AA 是絕大多數國際法規（歐盟 EN 301 549、美國 ADA、台灣網站無障礙規範）實際要求的目標；AAA 是最嚴格，通常只在特定內容上追求、難以全站達成。最常被引用的量化門檻是文字對比度：一般內文（正常字級）文字與背景至少要 4.5:1，大型文字（約 18pt 以上或 14pt 粗體）放寬到 3:1；到了 AAA 則分別提高到 7:1 與 4.5:1。此外，UI 元件的邊框、圖示、圖表等非文字元素與相鄰顏色也要達 3:1，這常是設計系統最容易漏掉的一塊——淡灰色的輸入框邊框、幾乎看不見的 placeholder，都是常見的失分點。
鍵盤操作、焦點順序與可見焦點
不用滑鼠也能完整操作，是「可操作」的核心。所有互動元件——按鈕、連結、下拉選單、分頁、表單欄位——都必須能用 Tab 聚焦、Enter 或 Space 觸發，且不能出現「鍵盤陷阱」（聚焦進去後 Tab 不出來）。焦點順序要符合視覺與邏輯順序，通常交給 DOM 的自然排列處理，濫用 tabindex 正數會打亂順序反而害人。可見的焦點指示同樣關鍵：使用者要看得出焦點現在停在哪，千萬別用 outline: none 把它拿掉卻不補上替代樣式。WCAG 2.2 更把這件事寫死——新增了 Focus Not Obscured（焦點元素不能被浮動列、cookie 橫幅遮住）與 Focus Appearance（焦點框要有足夠的面積與對比），也就是說「有焦點」還不夠，得「看得清楚的焦點」。
語意 HTML 優先，ARIA 是補救而非首選
輔助技術靠的是語意，不是外觀。用對原生元素，無障礙幾乎是免費的：<button> 自帶可聚焦、可鍵盤觸發、正確的角色；<nav>、<main>、<h1>~<h6> 提供螢幕閱讀器賴以跳轉的地標與大綱。ARIA（Accessible Rich Internet Applications）的第一守則正是——能用原生 HTML 表達的語意，就不要用 ARIA；ARIA 只宣告角色與狀態，不會自動附帶鍵盤行為，用錯反而製造更多障礙。2026 年 WebAIM Million 報告指出，帶有 ARIA 的頁面平均偵測到 59.1 個錯誤，反而高於不用 ARIA 的 42 個，正是誤用的代價。好消息是原生能力已補齊：<dialog>、<details>/<summary>、<progress>、<search> 全面被現代瀏覽器支援，過去要靠 role="dialog" + aria-modal + 大量 JS 才做得到的對話框，現在直接寫 <dialog> 就交給瀏覽器處理。真正需要 ARIA 的，是原生 HTML 表達不出的自訂元件（如 tabs、tree、live region）。
圖片替代文字、表單標籤與動態內容
三個高頻實戰點值得單獨記。替代文字（alt）：傳達資訊的圖片要寫出等價內容，純裝飾圖用空的 alt="" 讓螢幕閱讀器略過，切忌把每張裝飾圖都念一遍轟炸使用者。表單標籤：每個欄位都要有程式可關聯的 <label for>，不能只靠 placeholder 當標籤（placeholder 一輸入就消失、對比又低）；錯誤訊息要明確指出哪個欄位、錯在哪、怎麼改。動態內容：非同步更新（如搜尋建議、通知）要用 aria-live 讓螢幕閱讀器知道有變化；動畫與視差效果要尊重 prefers-reduced-motion 媒體查詢，替偏好減少動態的使用者關掉會誘發暈眩的效果。這一句 CSS 就能做到：@media (prefers-reduced-motion: reduce) { *{animation:none} } 的精神，把大動作降級成淡入。
🧠 記
- POUR＝可感知 / 可操作 / 可理解 / 穩健，是 WCAG 所有準則的四大分類。
- 符合等級 A < AA < AAA；AA 是法規實務目標，不是能力上限。
- 對比度：內文 4.5:1、大字 3:1、非文字 UI 元件 3:1（AAA 為 7:1 / 4.5:1）。
- 顏色不可作為傳遞資訊的唯一手段，要搭配文字或圖示。
- 全站可鍵盤操作、無鍵盤陷阱、焦點順序合邏輯、焦點要看得見。
- 語意 HTML 優先，ARIA 是補救；ARIA 只給語意不給行為，用錯比不用更糟。
- 有意義的圖要寫 alt，裝飾圖用
alt=""；表單一定要有關聯的<label>。 - 動態更新用
aria-live；動畫尊重prefers-reduced-motion。 - WCAG 2.2 新增 9 條準則（總計 87 條），重點在 Focus Appearance / Focus Not Obscured、Dragging Movements（拖曳要有單指替代）、Target Size（觸控目標最小 24×24px）、Accessible Authentication（別強迫記憶或解謎登入）。
- 無障礙的通用效益：字幕幫吵雜環境的人、對比幫烈日下看螢幕的人、鍵盤操作幫進階使用者、清楚的表單幫每一個人——這是通用設計，不只服務身障者。
✍️ 實踐
今天挑一個你維護中的元件（建議從 Button 或 Input 開始），做一次無障礙加固：
- 對比度：用瀏覽器 DevTools 的對比檢查或 Figma 外掛量一次文字、邊框、placeholder，把不足 4.5:1（或 UI 元件 3:1）的值改到達標，並把它寫回設計 token。
- 鍵盤：拔掉滑鼠，只用 Tab / Shift+Tab / Enter / Space / Esc 走完這個元件的所有狀態，確認焦點看得見、順序合理、沒有陷阱。
- 語意：檢查是不是用了
<div onclick>假扮按鈕，換成<button>；表單欄位補上關聯<label>。 - 螢幕閱讀器：開 macOS VoiceOver（Cmd+F5）或 Windows NVDA，實際聽一次這個元件念出來的角色、名稱、狀態對不對。
- 把以上檢查點寫成元件的驗收清單（checklist），讓它成為設計系統元件「完成的定義」，之後每個新元件都套用。
一天一個元件，一個月你的設計系統就有一套內建無障礙的基底。
🔗 延伸學習
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C 官方全文
- ARIA — Accessibility｜MDN Web Docs
- WCAG 2.2 Checklist：2026 Compliance Guide｜Level Access
- 網站無障礙設計（A11y）入門指南：WCAG 與實作重點（2026）｜SEM.tw
💬 問 AI
把你正在做的元件或頁面丟給 AI，請它扮演無障礙審查者，逐條對照 WCAG 2.2 AA 找問題並給修法。可複製的 prompt：
你是資深的無障礙工程審查者。以下是我的一個 UI 元件的 HTML/CSS（或截圖描述）：
[貼上你的程式碼或元件描述]
請依 WCAG 2.2 AA 標準逐項審查，並用表格輸出：
1. 對照的成功準則（編號與名稱，例如 1.4.3 對比度、2.1.1 鍵盤、4.1.2 名稱角色值）
2. 目前是否通過（通過／不通過／需人工確認）
3. 具體問題與風險影響哪一類使用者
4. 修正建議（給出可直接套用的程式碼片段，優先用原生 HTML，非必要不用 ARIA）
最後，列出這個元件要放進設計系統時，該寫進「完成定義」的無障礙驗收清單 3-5 條。