在上一篇簡單介紹了「無障礙設計規範：WCAG 2.1」，而遵循規範不是只為了取得標章，更是為了讓更多人能真正使用你的設計。

所以今天我們來看看設計師必須知道、能「在設計階段」就做到的規範。
就算不用會寫程式，也能讓產品更貼近無障礙設計的精神！

【1. 可感知 Perceivable】

🎯 1.4 可辨識

重點： 使用者要能區分內容，包含前景與背景。

UIUX 著重點：

• 文字與背景對比度符合 4.5 : 1 ; 而大尺寸的文字及大尺寸的影像文字至少要有 3 : 1 的對比度。
• 文字間距
  • 行高至少為字體大小的 1.5 倍。
  • 段落間距至少是字體大小的 2 倍。
  • 字元間距至少為字體大小的 0.12 倍；中文字元 0.14 倍。
  • 字間距至少為字體大小的 0.16 倍。
• 色彩不可當做唯一能傳達資訊的方式，應搭配其他元素 ( icon、說明文字 )。
  
  一般文字與背景對比度應符合 4.5 : 1 ，低於這個對比會造成資訊不易閱讀。

案例：
✅ 「表單錯誤」以紅框 + 驚嘆號 icon + 說明文字標示。
❌ 「成功」與「失敗」只用綠紅顏色區分。

【2. 可操作 Operable】

🎯 2.3 預防痙攣或不適

重點： 不使用閃爍或強烈閃光內容。

UIUX 著重點：

• 動畫頻率不可超過每秒3次。
• 轉場可採用淡入淡出或滑動替代閃爍。
• 若為動態banner等物件，提供暫停／停止控制。
  
  Material Design 網頁的動態物件有設置暫停按鈕，供使用者控制播放。

案例：
✅ 動畫以柔和移動展示資訊。
❌ 3D龍事件：日本電視台於 1997 年播放寶O夢因後半段畫面閃動過於頻繁，導致部分觀眾感到不適及暈倒，並造成685人送醫治療，後續被永久禁播。

🎯 2.4 可導覽

重點： 幫助使用者找到資訊、追蹤位置。

UIUX 著重點：

• 設置跳過區塊按鈕。
• 導覽列位置、breadcrumb 一致。
• 當前頁面明確以標題及標籤來描述主旨或目的。
• 在鍵盤操作時都會顯示焦點標示當前操作位置。
• 提供「返回頂端」或「上一頁」按鈕。
  
  無障礙網路空間服務網利用區塊按鈕、焦點顯示、breadcrumb 等方式，快速到達主要區塊並了解當前位置。

案例：
✅ 網站主選單固定於頂端，當前頁高亮顯示。
❌ 使用者無法分辨目前在哪個頁面。

🎯 2.5 輸入方式

重點： 功能應可用多種輸入方式操作。

UIUX 著重點：

• 按鈕與輸入框等可操作物件要有足夠可點擊範圍（至少 44 x 44px 以上）。
• 避免兩個互動元件太近導致誤觸 (至少 8px 以上)。
  
  圖片來源：Material Design

案例：
✅ 按鈕間距寬鬆，易於手指操作。
❌ 行動版按鈕過小，常誤觸相鄰選項。

【3. 可理解 Understandable】

🎯 3.1 可讀性

重點： 語言標註正確，用詞簡單。

UIUX 著重點：

• 避免難以理解 以及 又臭又長的句子。
• 確保錯誤訊息與說明文字清楚易懂。

案例：
✅ 「開啟手機驗證」。
❌ 「啟用裝置憑證」。

🎯 3.2 可預測性

重點： 網頁或介面應以可預期方式運作。

UIUX 著重點：

• 按鈕、導覽、icon 行為與位置應一致。
• 頁面切換時不應自動重定向或跳頁。
• 按下某功能應有可理解的結果。( 如：返回 → 回到上一頁 )

案例：
✅ 「下載」按鈕總是開啟檔案下載。
❌ 某頁的「下載」卻變成「開啟商品DM」。

🎯 3.3 錯誤協助

重點： 幫助使用者避免、發現、修正錯誤。

UIUX 著重點：

• 錯誤訊息應具體，說明哪個欄位錯、怎麼修改。
• 可在輸入時即時檢查格式。
• 錯誤預防 ( 法律、財務、個人資料，至少滿足以下條件之一 )
  • 送出的結果可反悔。
  • 由使用者所輸入的資料會先檢查有無輸入錯誤，並提供使用者更正的機會。
  • 完成資料送出前，提供讓使用者檢查、確認及更正資訊的機制。

案例：
✅ 「請輸入8位數字的身份證字號」。
❌ 「輸入錯誤」。

📌 總結

對一開始接觸無障礙設計的 UIUX 設計師來說，可以先掌握這幾項與設計直接相關的準則，就能讓介面兼顧美感與可及性，其中也涵蓋了：

• 視覺層面（ 對比、結構、層級 ）
• 互動層面（ 觸控距離、導覽一致 ）
• 語意層面（ 文字、錯誤提示、預測性 ）

當然，時間允許的話能熟悉全部的條款是最好的~
不過無障礙設計並不是一場靠背條文就能拿滿分的考試，真正能讓設計「被更多人使用」的關鍵，還是在於你是否願意去觀察、體驗並同理不同使用者的限制與需求。

這才是讓設計變得更有溫度、也更有價值的核心。