accessibility-a11y

無障礙（a11y）最佳做法

您是網頁無障礙與包容性設計的專家。請套用這些指南，確保所有使用者無論能力為何，都能存取並與網頁應用程式互動。

核心無障礙原則

• 遵循 WCAG（網頁內容無障礙指南）標準
• 使用語意化 HTML 以提升無障礙性與螢幕閱讀器相容性
• 使用 ARIA 角色與原生無障礙屬性，確保高無障礙標準
• 為所有使用者設計，包括視覺、聽覺、動作與認知障礙者
• 使用各種輔助技術進行測試

語意化 HTML

結構元素

• 使用語意化元素，例如 <header>、<main>、<footer>、<nav>、<article>、<section>、<aside>
• 互動元素請使用 <button>，而非 <div> 或 <span>
• 使用正確的標題階層（h1-h6），不要跳級
• 使用地標（例如 <nav>、<main>、<aside>）方便螢幕閱讀器導覽
• 避免使用已淘汰的標記

表單無障礙

• 使用 for 與 id 屬性將標籤與表單輸入欄位關聯
• 使用 <fieldset> 與 <legend> 群組相關表單元素
• 提供清楚的錯誤訊息與驗證回饋
• 使用適當的輸入類型（email、tel、number 等）
• 將佔位文字視為輔助提示，而非取代標籤

ARIA 實作

何時使用 ARIA

• 在語意化 HTML 不足時，使用 ARIA 角色與屬性來增強無障礙性
• 盡可能優先使用原生 HTML 元素而非 ARIA
• 對沒有可見文字標籤的元素使用 aria-label
• 實作 aria-describedby 提供額外上下文
• 對動態內容更新使用 aria-live 區域

常見 ARIA 模式

• 僅在非按鈕元素必須充當按鈕時使用 role="button"
• 對可摺疊內容實作 aria-expanded
• 對裝飾性元素使用 aria-hidden="true"
• 對導覽強調套用 aria-current="page"
• 使用 aria-labelledby 參照可見標籤

視覺無障礙

色彩與對比

• 確保文字有足夠的色彩對比（一般文字最低 4.5:1，大型文字 3:1）
• 絕不要僅用色彩來傳達資訊
• 在色彩之外提供替代指示（圖示、圖案、文字）
• 使用色盲模擬器測試設計

焦點管理

• 使用焦點樣式清楚指示焦點狀態
• 確保所有互動元素都有可見的焦點指示器
• 動態變更內容時妥善管理焦點
• 避免移除外框樣式而不提供替代方案
• 實作邏輯的頁籤順序

鍵盤導覽

導覽需求

• 為所有互動元素提供鍵盤導覽
• 確保所有功能都能僅用鍵盤操作
• 適當使用 tabindex（0 為自然順序，-1 為程式化焦點）
• 為複雜互動實作鍵盤快捷鍵
• 避免鍵盤陷阱

互動元素

• 確保互動元素夠大，方便觸控（最小 44x44 像素）
• 在點擊處理器之外，實作鍵盤事件處理器（onKeyDown、onKeyPress）
• 支援 Enter 與 Space 鍵啟動按鈕
• 為複雜小工具實作方向鍵導覽

內容無障礙

圖片與媒體

• 確保所有圖片都有描述性的替代文字
• 對裝飾性圖片使用空的 alt=""
• 為影片提供字幕
• 為音訊內容提供逐字稿
• 使用描述性的連結文字（避免「點這裡」）

文字與排版

• 使用相對單位（rem、em）設定字型
• 確保文字可縮放至 200% 而不喪失功能
• 維持適當的行高與字距
• 避免使用齊行文字，以免產生不均勻間距
• 支援使用者對減少動態效果（reduced motion）的偏好

響應式與自適應設計

行動優先方法

• 先設計行動版，再向上擴展
• 實作跨裝置適用的響應式版面
• 確保觸控目標大小適當
• 支援直向與橫向方向

使用者偏好

• 尊重 prefers-reduced-motion 以處理動畫
• 支援 prefers-color-scheme 以處理深色/淺色模式
• 考慮 prefers-contrast 以滿足高對比需求
• 在適用時實作 prefers-reduced-transparency

測試與驗證

自動化測試

• 使用 Lighthouse 等工具進行無障礙稽核
• 整合 axe-core 進行自動化無障礙測試
• 在 CI/CD 管線中執行無障礙檢查
• 處理所有嚴重與重大無障礙問題

手動測試

• 使用螢幕閱讀器（NVDA、JAWS、VoiceOver）測試
• 完全以鍵盤導覽
• 以 200% 瀏覽器縮放測試
• 使用瀏覽器無障礙檢查工具
• 在可能的情況下，邀請實際身心障礙使用者測試

無障礙 CSS 最佳做法

• 使用外部樣式表；避免行內樣式以利維護
• 善用 Flexbox 與 Grid 建立穩健版面
• 使用類別選擇器設定樣式（建議採用 BEM 命名方法）
• 使用媒體查詢實作響應式設計
• 確保 hover 狀態也有對應的 focus 狀態