無障礙設計
一句話定義
讓視覺 / 聽覺 / 動作 / 認知受限的使用者也能平等使用產品的設計實踐——元紀律是「多通道呈現 + 不讓任何一條通道成為唯一訊號」；既是 UX-三刀流 「用戶流」的延伸軸，也是 排版 / 圖表設計 等視覺設計頁的橫向約束層。
核心要點
五條操作軸（Apple WWDC 2022 圖表場景萃取，普適於任何 UI）
1. 多通道呈現：不讓任一通道為唯一訊號
顏色不該是訊號的唯一載體——色盲 / 色弱使用者直接失去資訊軸。
- 顏色 + 形狀 + 標籤三通道並存（紅警示 + 警告圖示 + 「警告」文字）
- 視覺 + 聽覺：圖表用 Audio Graph 把數值化為音階；通知用聲音 + 視覺氣泡
- 靜態 + 動態：動畫提示需有靜態回退（避免動畫關閉的使用者失去回饋）
2. 多輸入方式
螢幕觸控不是預設——任何介面元件應支援 5+ 種輸入方式。
| 輸入 | 對象 | 重點 |
|---|---|---|
| Touch | 觸控螢幕使用者 | 大觸控區（不照原始視覺大小）；費茲法則 說明目標越小 / 越遠越難命中 |
| Mouse | 桌面使用者 | hover 狀態 + 點擊回饋 |
| Keyboard | 鍵盤導航 / 動作受限 | Tab 順序 + 焦點視覺 + 快捷鍵 |
| Voice Control | 動作 / 視覺受限 | 語音指令對應元件名稱 |
| Switch Control | 重度動作受限 | 單鍵掃描選擇 |
| VoiceOver / Screen Reader | 視覺受限 | 朗讀順序 + 元件語意標籤 |
3. Screen Reader 友好標籤
VoiceOver / TalkBack / NVDA 等螢幕報讀器靠元件語意標籤朗讀介面。
三條標籤紀律（Apple WWDC 2022 整理）：
| 紀律 | 反例 | 正例 |
|---|---|---|
| Succinct（簡潔不重複） | 「按鈕：送出 / 送出按鈕」 | 「送出」 |
| Spell entire words（不縮寫） | 「Btn」「Img」 | 「Button」「Image」 |
| Context first（相關內容優先） | 「2026 年 5 月 2 日 / 銷售 / 1234」 | 「銷售 1234，2026 年 5 月 2 日」 |
4. 對比度與字級可調
- WCAG 對比度：正文 4.5:1（AA）/ 7:1（AAA）；大字 3:1（AA）
- 字級可調：尊重系統設定（iOS 動態字型 / Android 字體大小），不寫死 px
- 避免純黑（#000）/ 純灰（#CCC）：對比過強或過弱都加重視覺疲勞（易讀性 共通紀律）
5. 系統模式適配
- 深色 / 淺色模式：圖表 / 介面色票應同時設計兩套，不直接反轉色盤
- 高對比度模式：iOS / macOS / Windows 系統級開關時，介面應強化邊框 + 提升對比
- 減少動態效果（Reduce Motion）：禁用 parallax / 自動播放 / 視差動畫
入門四檢核（socialMORE）
2026-05-07-SocialMORE-UIUX設計入門-Part01 以 UI 新手語境整理四個高頻檢核：
| 檢核 | socialMORE 重點 | 對位本頁 |
|---|---|---|
| 顏色對比度 | 文字與背景至少符合 WCAG AA 4.5:1 | 對比度與字級可調 |
| 觸控目標大小 | Material Design 建議觸控目標至少 48 x 48 dp | 多輸入方式 / 費茲法則 |
| 顏色以外提示 | 色覺辨認障礙者不能只靠紅綠判斷錯誤 | 多通道呈現 |
| 替代文字 | 圖片 / 影片應提供簡短精確 alt text | Screen Reader 友好標籤 |
這份來源雖然不是完整 WCAG 教材，但適合作為設計師第一次把 a11y 放進 UI checklist 的入口。
三個相鄰概念：通用、包容性、公平中心
2026-05-09-Google-UX-Foundations-of-UX-Design筆記 補上無障礙設計附近常被混用的三個概念：
| 概念 | 核心 | 風險 / 用途 |
|---|---|---|
| 通用設計 | 為能力範圍與情境最廣的使用者建立一套通用解法 | 容易變成一刀切；適合做基礎可達性底線 |
| 包容性設計 | 設計時納入能力、種族、經濟地位、語言、年齡、性別等身分差異 | 不是只補救障礙，而是主動把多種使用者放進決策 |
| 以公平為中心的設計 | 特別聚焦歷來代表性不足或被忽視的群體 | 要從被排除者的具體需求出發，不只做平均使用者的延伸 |
這三者與本頁分工：無障礙設計 偏「能不能用」的可達性與輔助技術；包容性 / 公平中心設計偏「誰被納入設計想像」的研究與價值取向。現階段先收在本頁，等待更完整來源再評估是否拆頁。
四類使用者與常見輔助技術
Google UX 課程把無障礙常見群體整理為四類：動作障礙者、失聰或聽力困難者、認知障礙者、視力障礙者。對應的輔助技術包括：
- 高對比模式 / 暗色模式：讓低視力使用者更容易閱讀介面。
- 語音控制：讓使用者不用鍵盤或滑鼠也能導航與操作。
- 螢幕讀取器：朗讀文字、按鈕與圖片替代文字。
- Alt text：把有意義圖片轉成文字描述，也服務低頻寬或圖片載入失敗情境。
這些例子呼應本頁既有元命題：無障礙不是額外負擔，而是讓產品交給更多使用者的一種設計方式。
三個元命題
- 「多一條通道，不少一個人」——無障礙設計的本質不是為「殘障使用者」單獨設計，而是讓每個使用者都可以選擇自己慣用的通道。鍵盤導航也服務工程師、字幕也服務環境吵雜的使用者。
- 「顏色加強，不取代」——顏色是最容易誤用的訊號通道；色盲約 8% 男性、0.5% 女性，僅靠顏色等於主動排除這個比例的使用者。對位 圖表設計 Color 紀律「顏色加強而非取代訊息」。
- 「無障礙設計成本後置」——前期不做的代價是後期改造（每個元件需要重寫標籤、色票需要重設、互動需要重做）；對位 使用者研究「過程 > 交付」與 Prototype 早測精神——早做是設計、晚做是補救。
反模式
- 顏色是唯一訊號（紅 = 錯、綠 = 對；色盲直接失去軸）
- 圖示無 alt text / aria-label（screen reader 讀「圖示 圖示 圖示」無語意）
- 點擊區域照視覺大小（精細圖示變成輕微 motor 受限使用者的災難）
- 對比度過低的灰色文字（為了「美學」犧牲可讀性）
- 動畫沒有禁用選項（前庭功能受限使用者頭暈）
- PDF 圖檔形式的文字（screen reader 讀不到內容）
與其他概念的關係
UX 家族
- 屬於 MOC-UX 「介面表現工具層」橫向約束軸——任何介面表現決策都要過無障礙設計的檢核
- 與 UX-三刀流 之 用戶流：本頁是用戶流的延伸軸——不只關心多數使用者，也關心邊緣使用者；補位 vault 既有 UX 議題的「包容性」維度
- 與 使用者研究：無障礙議題需要把真實的受限使用者納入研究池——僅依賴設計師同事測試會漏掉重要場景
- 與 人物誌光譜：Microsoft 推廣的人物誌光譜把「情境受限」（吵雜環境 / 開車 / 受傷）與「永久受限」放在同一光譜，是本頁元命題「多一條通道，不少一個人」的人物模型實踐
- 與 費茲法則：大觸控區、充足間距與避免精細小目標，都是降低指向 / 觸控成本的具體做法；無障礙設計把此原則擴展到動作受限與多輸入情境。
視覺設計家族
- 與 排版：排版 備註已預埋「(c) 無障礙設計（WCAG 對比度、可調字級、screen reader 標題層級）」，本頁兌現該未來累積方向
- 與 易讀性：本頁 對比度 + 字級可調 = 易讀性 八工具的「顏色」+「分隔器」軸的無障礙約束；易讀性 備註明示「WCAG 對比度標準、可調字級設計、screen reader 標題層級」為未來方向
- 與 圖表設計：本頁是 圖表設計 三原則 Accessible 的具體實踐層——VoiceOver / Audio Graph / 色盲濾鏡 / 多輸入方式皆同源
- 與 色彩心理學：色彩心理是「選什麼色」、本頁是「怎麼讓非預期使用者也能讀懂」——兩者疊加才是完整色彩決策
- 與 60-30-10法則 / 格式塔原則：兩者建立視覺秩序，本頁確保秩序透過多通道傳達
工程介面
- 與 Core-Web-Vitals：CLS（累計版面位移）+ 大字級觸控優先間接服務無障礙；可調字級需要避免 fixed 高度容器（CLS 與字級可調的耦合點）
- 與 Pull-Request / GitHub工作流：accessibility 應作為 PR review checklist 之一（如 axe-core / Lighthouse a11y 檢查整合進 CI）
相關來源
- 2026-05-09-Google-UX-Foundations-of-UX-Design筆記 — 補入通用設計 / 包容性設計 / 以公平為中心的設計區分、四類無障礙使用者與輔助技術例子。
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — UI 入門層 a11y 檢核：4.5:1 對比度、48 x 48 dp 觸控目標、非色彩提示、替代文字
- 2026-05-02-蘋果與谷歌圖表設計大揭秘 — vault 第一份明確處理無障礙設計議題的來源；以 Apple WWDC 2022 圖表場景為素材；含 VoiceOver / Audio Graph / 多輸入方式 / 色盲檢查 / 系統模式適配等具體工具
- 2026-05-06-AAPD-UX定律-Fitts法則 — 補入 Fitts’s Law 作為觸控區大小與操作距離的人因基礎
備註
- 本頁聚焦**2026-05-02-蘋果與谷歌圖表設計大揭秘 萃取的圖表場景無障礙工具集**；非完整 WCAG / a11y 領域 umbrella
- 未來累積方向：
- (a) WCAG 標準完整對照——A / AA / AAA 等級內各條準則細節；國際法規（歐盟 EAA / 美國 ADA / 台灣 NCC 無障礙網頁）
- (b) 語意 HTML 與 ARIA 屬性——
role/aria-label/aria-describedby/aria-live的具體用法 - (c) 動作障礙設計——手部震顫 / 單手操作 / 觸控不準的界面策略（觸控區大小、容錯設計）
- (d) 認知障礙設計——閱讀障礙 / ADHD / 自閉譜系的介面友好性（簡化文案、可預測互動、減少干擾）
- (e) 聽覺障礙設計——影音字幕 / 視覺替代回饋 / 手語影片
- (f) 無障礙測試工具——axe / Lighthouse / WAVE / Pa11y / VoiceOver 實機測試工作流
- (g) 內容無障礙——文檔結構（標題層級、表格標頭、清單語意）/ alt text 撰寫紀律 / PDF 標籤化
- (h) 包容性設計（Inclusive Design）vs 通用設計（Universal Design）vs 無障礙設計（Accessibility）的概念區分
- 累積到完整 WCAG / ARIA / 包容性設計主題來源後，再評估拆出子概念；現階段保持 umbrella 形態以接受多來源累積