包容性設計 Inclusive Design｜WCAG 無障礙設計實戰指南

你有沒有想過，當你精心設計的介面上線後，有一群人根本無法使用它？根據世界衛生組織統計，全球約有 16% 的人口存在某種形式的障礙。這不是邊緣案例，而是你的使用者中每六個人就有一個。包容性設計 Inclusive Design 不只是道德議題，更是產品成敗的關鍵。

我自己在早期做 UI 設計的時候，老實說根本沒考慮過無障礙這件事。直到有次收到一位視障使用者的回饋，才驚覺自己設計的介面對他來說幾乎無法操作。那次經驗徹底改變了我對設計的看法。

什麼是包容性設計？

包容性設計的核心理念很簡單：從一開始就考慮到所有人的需求，而不是事後補救。它跟無障礙設計（Accessibility）有點不同——無障礙偏重技術規範的遵循，包容性設計則是更上層的設計思維，強調多元使用情境的考量。

微軟的包容性設計工具包提出了一個很棒的框架：障礙可以是永久的（失明）、暫時的（眼睛手術後）、或情境式的（在強光下看手機）。當你為永久性障礙設計解法時，往往能同時幫助到後面兩種情境的使用者。這就是所謂的「削邊效應」——為邊緣使用者設計，所有人都受益。

在建構Figma 設計系統實戰的過程中，我發現把無障礙元件直接整合進設計系統裡，是最有效率的做法。

WCAG（Web Content Accessibility Guidelines）是 W3C 制定的網頁無障礙指引，目前最新版本是 2.2。它把所有準則歸納成四大原則，簡稱 POUR：

每個準則有三個等級：A（基本）、AA（建議達標）、AAA（最佳）。大多數法規要求達到 AA 等級，這也是我建議大家至少要達到的標準。

視覺設計是最直覺的切入點。WCAG 2.2 對色彩對比的要求如下：

但對比度只是第一步。更重要的是不要只用顏色傳達資訊。舉個例子，表單驗證時不能只把欄位標紅，還需要加上文字說明或圖示。大約 8% 的男性有色覺障礙，紅綠對他們來說可能完全無法區分。

我個人的做法是在設計階段就使用灰階模式檢查介面，確保即使去掉所有顏色，資訊層次依然清晰可讀。

這是很多設計師會忽略的部分。你的介面必須完全可以用鍵盤操作，因為不是每個人都能使用滑鼠。具體來說：

WCAG 2.2 新增了幾個重要準則，像是 2.5.7 Dragging Movements 要求拖曳操作必須有替代方式，以及 2.5.8 Target Size 規定互動目標至少要有 24x24 CSS 像素。這些看似瑣碎的規定，其實大幅改善了動作障礙使用者的體驗。

這部分跟認知無障礙設計指南有很深的關聯，但這裡我聚焦在 WCAG 規範面。關鍵做法包括：

好的UX 寫作教學技巧在這裡特別有幫助。清楚的微文案能大幅降低使用者的認知負擔，讓操作流程更直覺。

穩健性原則確保你的介面能被各種輔助技術正確解讀。實務上最重要的是：

這裡有個常見誤區：很多人以為大量使用 ARIA 就是做好無障礙。事實上，ARIA 的第一原則就是「能用原生 HTML 就不要用 ARIA」。過度使用反而會造成混亂。

螢幕閱讀器是視障使用者最重要的輔助工具。設計時要注意：

我建議每位設計師至少花半天時間，關掉螢幕、純用螢幕閱讀器操作自己設計的介面。那個體驗會讓你對無障礙設計有完全不同的理解。

光靠人工檢查是不夠的，以下是我日常使用的工具：

工具能抓到的問題大約只佔 30-40%，剩下的需要人工測試。建議建立一份無障礙檢查清單，在每次設計交付前逐項確認。

案例一：政府數位服務
英國政府的 GOV.UK 是包容性設計的典範。他們的設計系統從一開始就把無障礙放在核心位置，每個元件都經過嚴格的輔助技術測試。結果不只是符合法規，整體使用者滿意度也大幅提升。

案例二：電商結帳流程
我曾經參與一個電商專案的無障礙改造。光是把結帳流程的鍵盤導航修好、加上正確的表單標籤和錯誤提示，結帳完成率就提升了 12%。這不只幫助了障礙使用者，所有人的體驗都變好了。

案例三：行動裝置觸控設計
把按鈕的觸控目標從 36px 調整到符合 WCAG 2.2 的 44px 建議值後，誤觸率下降了 30%。老年使用者和手指較粗的使用者反饋特別正面。

包容性設計不是額外的工作，而是好設計的基本功。WCAG 標準看似繁瑣，但核心邏輯其實很直覺：確保每個人都能感知、操作、理解你的介面。

我的建議是不要試圖一次做到完美。從最基本的色彩對比和鍵盤導航開始，逐步建立團隊的無障礙意識。把無障礙檢查融入設計流程和設計系統中，讓它變成習慣而不是負擔。

最後想說一句：當你為最不方便的使用者設計出好的體驗時，你會發現所有人的體驗都變得更好。這就是包容性設計最美的地方。