昨天談認知負荷與心理學法則,結論是「別讓使用者思考太多」。無障礙設計把這句話推到極限:當使用者看不到螢幕、無法用滑鼠、或無法辨識紅綠色差時,你的介面還撐得住嗎?這不是慈善議題,而是設計品質的壓力測試。一個為盲人、為鍵盤使用者、為色弱者也能運作的介面,對所有人都更清楚、更好用。
📖 學
無障礙不是合規,是好設計的副產品
把無障礙當成上線前補的「合規清單」,是最常見的誤解。真正的順序相反:當你被迫思考「螢幕閱讀器怎麼念這個按鈕」「只用鍵盤怎麼走完結帳」,你會發現自己順手修掉了一堆對明眼人也造成困擾的模糊設計。字幕幫助的不只是聽障者,還有在吵雜捷運上的通勤族;高對比幫助的不只是弱視者,還有在大太陽下看手機的人。這就是「路緣坡道效應」——為輪椅設計的斜坡,推嬰兒車、拖行李箱的人全都受惠。無障礙設計的投資報酬,幾乎總是外溢到全體使用者身上。
POUR:四大原則撐起整套 WCAG
WCAG(Web Content Accessibility Guidelines)由 W3C 制定,目前最新是 2.2 版,底層邏輯就是四個字:POUR。**可感知(Perceivable)**指資訊必須能被感官接收——圖片要有替代文字、影片要有字幕,不能只靠視覺或聽覺單一管道傳遞。**可操作(Operable)**指介面元件與導覽必須能被操作——不能強迫使用者做出他做不到的動作,例如只能用滑鼠精準點擊的操作就排除了鍵盤使用者。**可理解(Understandable)**指資訊與操作方式要能被理解——文案清楚、行為可預測、錯誤訊息講人話。**穩健(Robust)**指內容要夠穩固,能被各種瀏覽器與輔助技術可靠解讀,語意正確的 HTML 就是穩健的基礎。這四項底下共有十三條指引,每條指引再拆成可測試的成功準則。
A、AA、AAA:三個符合等級
每條成功準則都被歸類到三個等級。A 級是最低門檻,不做到會讓部分使用者完全無法使用。AA 級是業界與多數法規(例如歐盟 EN 301 549、美國 Section 508)實際採用的目標,兼顧可行性與涵蓋面。AAA 級是最高標準,W3C 明言不建議把整站當成必須全面達到 AAA 的目標,因為對某些內容根本做不到。實務上,「做到 AA」就是絕大多數團隊該瞄準的線,不必糾結於 AAA 的完美主義。
色彩對比:記住 4.5:1 這個數字
對比不足是自動化工具最常抓到、也最容易修的問題。WCAG 1.4.3(AA 級)要求一般文字與背景的對比比值至少 4.5:1;大型文字(18pt 以上,或 14pt 以上的粗體)可放寬到 3:1。到了 AAA 級,一般文字要拉高到 7:1、大型文字 4.5:1。這個 4.5:1 不是憑空定的:它假設一位 20/40 視力的使用者,需要在基準 3:1 上再乘 1.5 倍的餘裕來補償視力損失。要注意例外——純裝飾性文字、失效元件、logo 不受此限。別用肉眼猜,用工具量。
鍵盤可操作與焦點順序
有一群使用者從不碰滑鼠:重度鍵盤使用者、行動不便者、以及所有螢幕閱讀器使用者。檢驗方法很直接:收起滑鼠,只用 Tab、Shift+Tab、Enter、空白鍵與方向鍵,試著走完你介面的核心流程。你會立刻發現三種常見毛病:焦點看不見(被 outline: none 拿掉了)、焦點順序跳來跳去(和視覺排列不一致)、以及焦點掉進彈窗後跑不出來或跑到背景去(缺少焦點陷阱)。每一個可互動元件都必須能被聚焦,而且聚焦時要有清楚的視覺指示。永遠不要無條件移除 focus 樣式;要嘛保留,要嘛用 :focus-visible 設計得更好看。
螢幕閱讀器與語意化 HTML
螢幕閱讀器不是「唸出畫面上的字」,而是根據 HTML 的語意結構,重建出一份可導覽的資訊地圖。使用者靠標題(<h1>~<h6>)在頁面間跳躍、靠地標(<nav>、<main>、<header>)快速定位、靠正確的表單標籤知道每個輸入框要填什麼。這代表最強的無障礙技巧其實是「寫對 HTML」:用 <button> 而不是可點擊的 <div>、用真正的 <label> 綁定 <input>、用有意義的標題層級而不是把文字放大當標題。語意化 HTML 幾乎免費就給你鍵盤操作、焦點管理與正確朗讀,這正是 POUR 裡「穩健」的核心。
ARIA:救急用的補丁,不是預設工具
ARIA(Accessible Rich Internet Applications)能為原生 HTML 表達不了的複雜元件(如自訂下拉、分頁、即時通知區)補上角色、狀態與屬性。但 W3C 的第一條規則講得很白:**如果原生 HTML 元素已經有你要的無障礙特性,就用它,別用 ARIA 硬造。**更重要的一句是「沒有 ARIA 好過爛 ARIA」——因為 ARIA 只改變輔助技術聽到的內容,不會自動帶來鍵盤行為或樣式。你若給一個 <div> 加上 role="button",螢幕閱讀器會宣告它是按鈕,但它既不能用 Enter 觸發、也不能被 Tab 聚焦,對使用者反而是欺騙。常見誤用還包括:在原生元素上重複標註角色(<button role="button">)、用 aria-label 蓋掉本來就正確的可見文字、或設了 aria-expanded 卻忘了在互動時更新它的值。
替代文字與常見錯誤
替代文字(alt)的原則是「傳達功能與意義,而非描述像素」。資訊性圖片要寫出它傳達的內容(alt="季度營收成長 20%"),純裝飾圖片則給空 alt(alt="")讓螢幕閱讀器直接略過,而不是完全不寫 alt 屬性——後者會讓部分閱讀器唸出檔名。其他高頻錯誤還有:用顏色作為唯一的資訊區分(紅字表示錯誤,色盲者看不出來,要加圖示或文字)、表單錯誤只用邊框變色卻沒有文字說明、以及影片沒有字幕。這些問題共通點都是「把資訊綁死在單一感官通道」,正好違反 POUR 的第一條。
🧠 記
- 無障礙不是慈善或合規,是逼你把介面做得更清楚的品質壓力測試,受惠的是全體使用者。
- POUR 是 WCAG 的骨架:可感知、可操作、可理解、穩健。
- 目標等級瞄準 AA 就對了;A 是底線,AAA 官方不建議整站強求。
- 一般文字對比至少 4.5:1、大型文字 3:1(AA);別用眼睛猜,用工具量。
- 收起滑鼠只用鍵盤走一遍,焦點要看得見、順序要合理、彈窗要有焦點陷阱。
- 語意化 HTML 幾乎免費給你無障礙;ARIA 是補丁,「沒有 ARIA 好過爛 ARIA」。
✍️ 實踐
今天挑你手邊一個真實介面(自己的專案、一個常用網站、或一個元件),做兩件當天做得完的事。第一,打開 WebAIM Contrast Checker,量測介面裡最容易出問題的三處文字:次要說明文字(常是淺灰)、按鈕上的文字、以及 placeholder。把前景色與背景色的 hex 值貼進去,記下哪些沒過 4.5:1,並試著調到通過。第二,把滑鼠移到一旁,只用鍵盤走完這個介面的一條核心路徑(例如登入或送出表單),過程中觀察三件事:焦點框看不看得見?Tab 的順序跟你眼睛讀的順序一致嗎?有沒有哪個元件你按不到、或掉進去出不來?把發現的問題記三條下來,這就是你下一輪要修的清單。
🔗 延伸學習
- WCAG 2 Overview | W3C WAI — WCAG 的官方總覽,了解版本、結構與符合等級的最佳起點。
- Understanding SC 1.4.3: Contrast (Minimum) | W3C WAI — 對比比值 4.5:1 / 3:1 的官方詳解與背後理由。
- ARIA Authoring Practices Guide (APG) | W3C WAI — 各種複雜元件的正確 ARIA 實作範式,含「no ARIA is better than bad ARIA」。
- WebAIM: Contrast Checker — 最常用的線上對比檢查工具,今天實踐就用它。
💬 問 AI
我要為以下介面做無障礙審查。請扮演資深無障礙工程師,依 WCAG 2.2 AA 逐項檢視,並用 POUR 四原則分類問題。
介面情境:[貼上你的頁面/元件描述或 HTML]
請針對以下面向各給具體發現與修正建議:
1. 色彩對比(標出未達 4.5:1 的文字並建議可通過的顏色)
2. 鍵盤可操作性與焦點順序
3. 語意化 HTML(哪裡該用原生元素取代 div/span)
4. ARIA 使用是否正確,有沒有多餘或誤用
5. 替代文字與「僅用顏色傳達資訊」的問題
最後,依修正的影響力與成本,幫我排出一份優先順序清單。