你有沒有試過在大太陽下看手機，淺灰色的字幾乎讀不到？或是滑鼠突然壞掉，只能用鍵盤的 Tab 鍵硬逛一個網站，結果完全找不到游標跑去哪了？這些不是「特例」，而是每天都在發生的真實情境。無障礙設計（Accessibility，常簡寫為 a11y）就是在處理這件事：讓網站不只服務「視力好、用滑鼠、坐在室內」的人，而是服務所有人。
今天你會學到：a11y 是什麼、為什麼是 2025–2026 的設計基本功、以及三個你今天就能動手檢查的具體重點——對比度、鍵盤操作、ARIA。 這篇不談法律條文，只談你做設計或寫頁面時真正用得到的東西。
📖 學（核心）
無障礙設計的國際標準叫 WCAG（Web Content Accessibility Guidelines），目前最新且作為法規基準的是 WCAG 2.2（2023 年 10 月成為 W3C 正式建議，到 2025 年已是各國合規的預設門檻，包含美國 ADA、Section 508 與歐盟無障礙法案 EAA）。台灣現行的「數位服務無障礙規範」對應到 2.1，正逐步與 2.2 接軌。
WCAG 的核心是四個原則，英文縮寫成 POUR：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、穩健（Robust）。聽起來抽象，但拆成三個你會反覆遇到的重點就很具體了。
第一，對比度（Contrast）。 這是「可感知」的核心。WCAG 要求一般內文文字與背景的對比度至少 4.5:1，大型文字（約 18pt 以上或粗體 14pt）至少 3:1；按鈕、輸入框邊框這類「介面元件」與相鄰顏色也要至少 3:1。為什麼是這些數字？因為淺灰配白、品牌色配品牌色這種「設計師覺得很美」的組合，常常讓低視力者、色弱者、或只是在強光下的人完全看不清。你不用心算，瀏覽器開發者工具（DevTools）的色彩選擇器會直接顯示對比比值，或用線上的 contrast checker 貼上兩個色碼即可。
第二，鍵盤操作（Keyboard Navigation）。 這是「可操作」的核心。不是每個人都能用滑鼠——有些人手部不便、有些人用螢幕報讀軟體、有些人就是習慣鍵盤。原則很簡單：所有按鈕、連結、輸入框，都要能用 Tab 鍵移動、Enter 或空白鍵觸發、方向鍵操作。 而且使用者必須「看得到」目前焦點在哪，這就是 WCAG 2.2 新增的「焦點外觀（Focus Appearance）」重點。實務上，千萬不要為了好看而寫 outline: none 把焦點框拿掉；正確做法是用 CSS 的 :focus-visible 自己設計一個清楚的焦點樣式。WCAG 2.2 還新增了「拖曳動作（Dragging Movements）」與「目標尺寸（Target Size）至少 24×24 CSS 像素」，提醒我們：任何用拖曳完成的操作，都要提供鍵盤或點按的替代方式。
第三，ARIA。 ARIA（Accessible Rich Internet Applications）是一組可以加在 HTML 上的屬性，用來告訴螢幕報讀軟體「這個東西是什麼、現在是什麼狀態」。但這裡有一條最重要的鐵律——ARIA 的第一守則：如果原生 HTML 元素就能做到，就用原生元素，不要用 ARIA。 例如要做按鈕，請直接用 <button>，而不是拿一個 <div> 加上 role="button" 再自己補一堆鍵盤事件。<button> 天生就能被 Tab 聚焦、能被 Enter 觸發、報讀軟體也認得它。ARIA 是「原生 HTML 不夠用時」的補強工具（例如自訂的分頁、提示氣泡、即時更新區域），不是拿來取代語意化標籤的。寫對語意化 HTML，等於免費拿到一大半的無障礙。
舉個整合的例子：一個「刪除」圖示按鈕。錯誤版是 <div onclick="...">🗑️</div>——鍵盤按不到、報讀軟體只會唸出一個垃圾桶 emoji。正確版是 <button aria-label="刪除這則留言">🗑️</button>——可聚焦、可用 Enter 觸發、報讀軟體會清楚唸出「刪除這則留言，按鈕」。一個小改動，就讓一群人從「完全用不了」變成「順暢使用」。
🧠 記
口訣：「對比看得清、鍵盤走得通、語意說得明。」
- POUR 四原則：可感知、可操作、可理解、穩健——遇到設計取捨時拿出來對照。
- 對比度數字：內文 4.5:1、大字與介面元件 3:1，不確定就用 DevTools 量。
- 鍵盤鐵律：能 Tab、能 Enter、焦點看得見；永遠不要裸著拿掉
outline，改用:focus-visible。 - ARIA 第一守則：原生 HTML 能做就用原生（
<button>、<a>、<label>），ARIA 只在不夠用時補強。 - 2.2 新重點：焦點外觀、拖曳要有替代、點擊目標至少 24×24 像素。
✍️ 實踐
今天挑一個你常用、或自己做的網頁，只用鍵盤完成一次「核心任務」（例如：登入、送出一則留言、或加入購物車）。全程不碰滑鼠：用 Tab 前進、Shift+Tab 後退、Enter 或空白鍵觸發。
過程中記錄三件事：(1) 有沒有任何一步「Tab 到了卻看不出焦點在哪」？(2) 有沒有「Tab 根本到不了、只能用滑鼠點」的元素？(3) 完成整個任務總共按了幾次 Tab？把這三個答案寫下來——只要找到「1 個」焦點看不見或鍵盤到不了的地方，你今天就學到了真本事。
🔗 延伸學習
- WCAG 2.2 官方標準（W3C） — 最權威的原始準則文件
- WCAG 2 Overview（W3C WAI） — 適合入門的總覽說明
- Color Contrast Accessibility：WCAG 2025 完整指南＋免費檢測工具 — 對比度實作與檢查工具
- 從 WCAG 2.0 到 2.2──無障礙標準的進化史與在地法規對照（和康顧問） — 繁體中文，含台灣法規對照
💬 想深入？複製下面這段到 AI（ChatGPT、Claude…），再打上你的問題
你是我的「UI/UX 設計」學習教練。我今天在學的主題是「無障礙設計（Accessibility / a11y）」，重點包括：對比度 4.5:1 與 3:1、鍵盤操作與焦點可見、ARIA 第一守則（原生 HTML 優先）、WCAG 2.2 新增準則。請用淺白、可操作的方式回答我接下來的問題，需要時給例子和步驟。我的問題是：
↑ 複製整段，貼到 AI，最後接上你的問題即可。