無障礙設計完整指南

無障礙的對象

• 視覺障礙（用螢幕閱讀器）
• 聽覺障礙
• 行動不便（無法用滑鼠）
• 認知障礙
• 暫時失能（手受傷、眼疲勞）

不只是道德，也是商機與法規。

WCAG 三等級

• A（基本）：所有網站應達到
• AA（標準）：電商建議達到
• AAA（最高）：特殊需求

台灣政府機關須達 AA、私人企業建議 AA。

電商必做 10 大

• 文字對比度 4.5:1
• ALT 文字（圖片描述）
• 鍵盤導航完整（Tab 鍵）
• 表單標籤明確
• 錯誤訊息清楚
• 影片字幕
• 顏色不為唯一資訊（盲色友善）
• 按鈕大小（≥ 44px）
• 文字可放大 200% 不破版
• 螢幕閱讀器友善（ARIA 標籤）

無障礙與 SEO 重疊

• ALT 文字（圖片 SEO + 閱讀器）
• 語意 HTML
• 標題層級（h1-h6）
• 鏈接描述性（不要「點這裡」）
• 頁面結構清楚

做無障礙的網站，SEO 排名自然好。雙贏。

顏色與對比度

五大色彩原則：1. 文字與背景對比度 4.5:1（小字）/ 3:1（大字）；2. 不只用顏色傳遞資訊（紅字加 ⚠ 圖示）；3. 連結除了顏色還要底線；4. 表單錯誤紅框 + 文字；5. 用 WebAIM Contrast Checker 檢查。盲色約 8% 男性 / 0.5% 女性。

鍵盤導航

必做：1. 所有功能 Tab 可達；2. Focus 焦點明顯（不要 outline: none）；3. 邏輯順序（從上到下、從左到右）；4. Skip Link（直接跳到內容）；5. Modal 焦點陷阱（不會跑到背景）。測試：拔掉滑鼠用鍵盤完成購物流程，能完成才合格。

ARIA 標籤應用

補強語意：1. aria-label（按鈕無文字時描述）；2. aria-live（動態內容通知）；3. aria-expanded（折疊展開）；4. aria-required（必填欄位）；5. role（角色標示）。原則：能用原生 HTML 就用，ARIA 只用於補強。

表單無障礙

• 所有 input 有 label
• 必填欄位明確標示
• 錯誤訊息描述「該怎麼修」
• 分組欄位用 fieldset
• 提交後焦點移到錯誤欄

檢測工具

• Lighthouse 無障礙評分
• axe DevTools（Chrome 擴充）
• WAVE（網站檢測）
• NVDA（免費螢幕閱讀器）
• 鍵盤測試（拔滑鼠 Tab）

目標：Lighthouse 90+。自己用閱讀器試一次最深刻。

常見問題解答