包容性設計 Inclusive Design 實戰:WCAG 無障礙標準完整指南
你有沒有想過,當你精心設計的介面上線後,有一群人根本無法使用它?根據世界衛生組織統計,全球約有 16% 的人口存在某種形式的障礙。這不是邊緣案例,而是你的使用者中每六個人就有一個。包容性設計 Inclusive Design 不只是道德議題,更是產品成敗的關鍵。
我自己在早期做 UI 設計的時候,老實說根本沒考慮過無障礙這件事。直到有次收到一位視障使用者的回饋,才驚覺自己設計的介面對他來說幾乎無法操作。那次經驗徹底改變了我對設計的看法。
什麼是包容性設計?
包容性設計的核心理念很簡單:從一開始就考慮到所有人的需求,而不是事後補救。它跟無障礙設計(Accessibility)有點不同——無障礙偏重技術規範的遵循,包容性設計則是更上層的設計思維,強調多元使用情境的考量。
微軟的包容性設計工具包提出了一個很棒的框架:障礙可以是永久的(失明)、暫時的(眼睛手術後)、或情境式的(在強光下看手機)。當你為永久性障礙設計解法時,往往能同時幫助到後面兩種情境的使用者。這就是所謂的「削邊效應」——為邊緣使用者設計,所有人都受益。
在建構Figma 設計系統實戰的過程中,我發現把無障礙元件直接整合進設計系統裡,是最有效率的做法。
WCAG 2.2 標準快速導覽
WCAG(Web Content Accessibility Guidelines)是 W3C 制定的網頁無障礙指引,目前最新版本是 2.2。它把所有準則歸納成四大原則,簡稱 POUR:
- Perceivable(可感知):資訊和介面元件必須能被使用者感知
- Operable(可操作):互動元件必須能被操作
- Understandable(可理解):資訊和操作方式必須能被理解
- Robust(穩健):內容必須能被各種輔助技術正確解讀
每個準則有三個等級:A(基本)、AA(建議達標)、AAA(最佳)。大多數法規要求達到 AA 等級,這也是我建議大家至少要達到的標準。
可感知:色彩對比與視覺設計
視覺設計是最直覺的切入點。WCAG 2.2 對色彩對比的要求如下:
- 一般文字:對比度至少 4.5:1(AA 等級)
- 大型文字(18px 粗體或 24px 以上):至少 3:1
- 非文字元素(圖示、按鈕邊框等):至少 3:1
但對比度只是第一步。更重要的是不要只用顏色傳達資訊。舉個例子,表單驗證時不能只把欄位標紅,還需要加上文字說明或圖示。大約 8% 的男性有色覺障礙,紅綠對他們來說可能完全無法區分。
我個人的做法是在設計階段就使用灰階模式檢查介面,確保即使去掉所有顏色,資訊層次依然清晰可讀。
可操作:鍵盤導航與互動設計
這是很多設計師會忽略的部分。你的介面必須完全可以用鍵盤操作,因為不是每個人都能使用滑鼠。具體來說:
- 所有互動元素都要能透過 Tab 鍵聚焦
- 焦點順序必須合乎邏輯(通常是由上到下、由左到右)
- 焦點樣式必須清晰可見——這點超級重要,千萬不要用 CSS 把 outline 拿掉
- 提供跳過導航的機制(Skip to content link)
- 避免鍵盤陷阱,特別是 Modal 和下拉選單
WCAG 2.2 新增了幾個重要準則,像是 2.5.7 Dragging Movements 要求拖曳操作必須有替代方式,以及 2.5.8 Target Size 規定互動目標至少要有 24x24 CSS 像素。這些看似瑣碎的規定,其實大幅改善了動作障礙使用者的體驗。
可理解:降低認知負擔
這部分跟認知無障礙設計指南有很深的關聯,但這裡我聚焦在 WCAG 規範面。關鍵做法包括:
- 表單要提供清楚的標籤和錯誤提示
- 導航方式在整個網站保持一致
- 使用簡潔的語言,避免不必要的專業術語
- 重要操作前提供確認機制,允許使用者修正或取消
好的UX 寫作教學技巧在這裡特別有幫助。清楚的微文案能大幅降低使用者的認知負擔,讓操作流程更直覺。
穩健性:跨技術相容
穩健性原則確保你的介面能被各種輔助技術正確解讀。實務上最重要的是:
- 使用語意化 HTML(用
<button>而不是<div onclick>) - 正確使用 ARIA 屬性來補充語意不足的地方
- 確保自訂元件有正確的 role、state、property
這裡有個常見誤區:很多人以為大量使用 ARIA 就是做好無障礙。事實上,ARIA 的第一原則就是「能用原生 HTML 就不要用 ARIA」。過度使用反而會造成混亂。
螢幕閱讀器支援實務
螢幕閱讀器是視障使用者最重要的輔助工具。設計時要注意:
- 所有圖片都要有適當的
alt文字(裝飾性圖片用空的 alt) - 表單元件必須用
<label>正確關聯 - 動態內容更新要使用
aria-live區域通知使用者 - 頁面標題結構要有層次(h1 → h2 → h3 按順序)
- 連結文字要有意義,避免「點這裡」、「更多」這種模糊描述
我建議每位設計師至少花半天時間,關掉螢幕、純用螢幕閱讀器操作自己設計的介面。那個體驗會讓你對無障礙設計有完全不同的理解。
無障礙測試工具推薦
光靠人工檢查是不夠的,以下是我日常使用的工具:
- axe DevTools:瀏覽器擴充套件,一鍵掃描頁面無障礙問題,結果清楚分類
- WAVE:視覺化顯示頁面的無障礙狀態,適合快速掃描
- Lighthouse:Chrome 內建,雖然涵蓋面較廣但無障礙檢測也很實用
- Colour Contrast Analyser:專門檢查色彩對比度的桌面工具
- 螢幕閱讀器:VoiceOver(Mac)、NVDA(Windows 免費)、TalkBack(Android)
工具能抓到的問題大約只佔 30-40%,剩下的需要人工測試。建議建立一份無障礙檢查清單,在每次設計交付前逐項確認。
實際案例分析
案例一:政府數位服務
英國政府的 GOV.UK 是包容性設計的典範。他們的設計系統從一開始就把無障礙放在核心位置,每個元件都經過嚴格的輔助技術測試。結果不只是符合法規,整體使用者滿意度也大幅提升。
案例二:電商結帳流程
我曾經參與一個電商專案的無障礙改造。光是把結帳流程的鍵盤導航修好、加上正確的表單標籤和錯誤提示,結帳完成率就提升了 12%。這不只幫助了障礙使用者,所有人的體驗都變好了。
案例三:行動裝置觸控設計
把按鈕的觸控目標從 36px 調整到符合 WCAG 2.2 的 44px 建議值後,誤觸率下降了 30%。老年使用者和手指較粗的使用者反饋特別正面。
結語:設計不該有門檻
包容性設計不是額外的工作,而是好設計的基本功。WCAG 標準看似繁瑣,但核心邏輯其實很直覺:確保每個人都能感知、操作、理解你的介面。
我的建議是不要試圖一次做到完美。從最基本的色彩對比和鍵盤導航開始,逐步建立團隊的無障礙意識。把無障礙檢查融入設計流程和設計系統中,讓它變成習慣而不是負擔。
最後想說一句:當你為最不方便的使用者設計出好的體驗時,你會發現所有人的體驗都變得更好。這就是包容性設計最美的地方。
繼續閱讀
UX 寫作教學:UI 文案設計原則與微文案撰寫技巧完整指南
UI 上的每一個字都會影響使用者的行為。一個按鈕寫「提交」和「立即開始免費試用」的轉換率差距可能高達 30%。這篇教學帶你從 UX Writing 的核心原則開始,學會撰寫有效的 UI 文案與微文案。
相關文章
你可能也喜歡
探索其他領域的精選好文