一、什麼是無障礙設計？
無障礙網頁設計（Web Accessibility）確保所有人——包括視障、聽障、行動不便、認知障礙的使用者——都能平等地存取和使用你的網站。
根據世界衛生組織的統計，全球約有 13 億人（佔總人口 16%）有不同程度的殘障。在台灣，身心障礙者超過 120 萬人。無障礙設計不只是道德責任，更是一個巨大的市場機會。
此外，無障礙設計帶來的附帶效益包括：更好的 SEO（搜尋引擎和無障礙工具使用類似的技術理解內容）、更好的使用者體驗（對所有人而言）、以及法律合規（台灣《身心障礙者權益保障法》要求政府網站與部分民間網站符合無障礙標準）。
二、WCAG 2.1 AA 核心原則
WCAG 2.1 基於四大原則（POUR）：
1. 可感知（Perceivable）
資訊和使用者介面必須以使用者能感知的方式呈現：
- 為所有非文字內容提供替代文字（alt text）
- 為影片提供字幕和音訊描述
- 內容可以不同的方式呈現（例如螢幕閱讀器可以正確讀取）
- 確保使用者能輕鬆看見和聽見內容（色彩對比、可調整文字大小）
2. 可操作（Operable）
使用者介面元件和導覽必須可操作：
- 所有功能可透過鍵盤操作（不依賴滑鼠）
- 給予使用者足夠的時間閱讀和使用內容
- 不使用可能引起癲癇的閃爍內容
- 提供清楚的導覽和頁面標題
3. 可理解（Understandable）
- 文字內容清晰可讀，使用簡單明瞭的語言
- 網頁的外觀和操作方式具有一致性
- 協助使用者避免和修正錯誤（表單驗證、錯誤訊息）
4. 健壯（Robust）
- 使用語意化的 HTML 結構
- 確保內容能被各種使用者代理（包括輔助技術）正確解析
- 保持與未來技術的相容性
三、色彩與視覺設計
3.1 色彩對比度
WCAG AA 級別的色彩對比度要求：
- 一般文字：對比度至少 4.5:1
- 大文字（18px 以上粗體或 24px 以上）：至少 3:1
- 非文字元素（圖標、邊框）：至少 3:1
推薦工具：WebAIM Contrast Checker、Colour Contrast Check。
3.2 不要僅靠色彩傳達資訊
約 8% 的男性和 0.5% 的女性有色覺辨別障礙。不要僅靠顏色區分狀態：
- 錯誤提示：除了紅色外框，加入文字說明和圖標
- 連結文字：除了顏色變化外，加入底線
- 表單驗證：使用 ✓/✗ 圖標輔助顏色
四、鍵盤與螢幕閱讀器
4.1 焦點管理
鍵盤使用者透過 Tab 鍵在頁面元素間移動。確保：
- 焦點順序符合邏輯（通常從左到右、從上到下）
- 焦點指示器清晰可見（不要
outline: none！） - 所有互動元素可聚焦（按鈕、連結、表單欄位）
- 跳過導覽列的跳轉連結（Skip to main content）
/* 自訂焦點樣式（保留可見性） */
:focus-visible {
outline: 3px solid #533afd;
outline-offset: 2px;
}
/* 跳轉連結（預設隱藏，鍵盤聚焦時顯示） */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #533afd;
color: white;
padding: 8px 16px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}4.2 ARIA 標記
ARIA（Accessible Rich Internet Applications）屬性補充 HTML 語意不足的部分：
aria-label— 為沒有文字的元素提供標籤（如圖標按鈕）aria-describedby— 將說明文字與表單欄位關聯aria-expanded— 標示摺疊區塊的展開/收合狀態aria-live— 通知螢幕閱讀器動態更新的內容
重要原則：先用正確的 HTML 語意（<button>、<nav>、<main>），只在必要時才使用 ARIA。錯誤的 ARIA 比沒有 ARIA 更糟。
五、測試與工具
- Axe DevTools：Chrome 擴充套件，自動檢測常見的無障礙問題。
- WAVE：線上工具，視覺化呈現頁面的無障礙問題。
- Lighthouse：內建於 Chrome DevTools，包含無障礙評分。
- 螢幕閱讀器測試：Windows 上使用 NVDA（免費）、Mac 上使用 VoiceOver（內建）。
- 鍵盤測試：拔掉滑鼠，僅使用 Tab、Enter、方向鍵操作整個網站。
六、實作清單
- ☐ 所有圖片有描述性 alt 屬性
- ☐ 色彩對比度達到 4.5:1 以上
- ☐ 所有功能可透過鍵盤操作
- ☐ 焦點指示器清晰可見
- ☐ 表單欄位有正確的 label
- ☐ 頁面有 skip link
- ☐ 使用語意化 HTML（nav、main、article、section）
- ☐ 影片有字幕
- ☐ 尊重 prefers-reduced-motion
- ☐ 通過 Axe DevTools 自動化檢測