無障礙網頁 WCAG 2.1 AA 級規範的 10 個技術重點

網站無障礙設計（Web Accessibility）不僅是為了符合法規與標準，更是體現對所有使用者的尊重與包容。

1. 文字與背景色彩對比充足

為了確保視覺障礙者（如色弱、年長者）能夠清楚閱讀網頁內容，文字與背景之間的對比度應達到 至少 4.5:1，標題建議達到 3:1。這能避免文字與背景色調過於接近導致難以辨識。

✅ 建議工具：使用 [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) 驗證對比比值  

✅ 須檢查項目：段落文字、按鈕文字、超連結、表單欄位等

2. 可鍵盤操作所有功能

所有互動元件（如：按鈕、下拉選單、分頁、表單欄位）必須可透過 鍵盤 Tab 鍵操作與觸發。不可依賴滑鼠才能完成操作。

🔑 常見問題：  

• 自訂下拉選單無法透過鍵盤展開  
• 關閉按鈕無法透過 Enter 或 Space 觸發

💡 解法：使用原生 HTML 元素或補上 `tabindex` 及 `keydown` 事件控制。

3. 圖片需有替代文字（alt text）

所有圖片（尤其是具有資訊意義者）應設定 描述性替代文字（alt），供使用螢幕閱讀器的使用者理解圖片內容。

📌 重點分類：

• 裝飾用圖片：可使用空 alt (`alt=""`) 避免干擾
• 資訊圖示：須具備明確的文字描述，如 `alt="警告：密碼太短"`

4. 表單欄位需具備標籤（Label）與錯誤提示

每個輸入欄位都必須有明確的 `` 標示其用途，且當用戶輸入錯誤時，要有即時的錯誤提示訊息，且語意標記（如 `aria-describedby`）要完整。

🧩 額外補充：

• 輸入格式錯誤要提示具體錯誤內容，例如：「請輸入有效的電子郵件格式」
• 可考慮加上圖示或顏色輔助，但 不可僅以顏色區分

5. 不只靠顏色傳遞資訊

任何重要資訊（如：表單錯誤、步驟進度、狀態變化）不能只依賴顏色。應搭配文字、圖示、線條或其他視覺提示。

🟥 錯誤示範：

「此欄位填寫錯誤」（文字變紅，但無其他提示）

✅ 正確作法：

「此欄位填寫錯誤 ❗請輸入密碼至少 8 字元」

6. 響應式設計（RWD）

網站應能隨裝置尺寸與解析度自動調整版面配置與內容呈現。無論是手機、平板或桌機，都應保有良好使用體驗。

📱 實務重點：

• 行動裝置不應出現橫向捲動條
• 互動元件應具備足夠的可點擊區域（最少 44px）

7. 可調整文字大小不影響版面

使用者將瀏覽器文字放大至 200% 時，內容仍需維持結構清晰、不產生重疊、跑版或裁切等問題。

🧪 測試方式：使用 Ctrl + 滾輪 / Command + + 進行放大測試

📐 設計建議：使用 `em` / `rem` 單位，避免使用絕對像素（px）控制文字大小

8. 有焦點指示（Focus Indicator）

使用 Tab 鍵操作時，螢幕上應清楚標示當前焦點元件的位置，例如按鈕高亮、邊框出現、文字顏色變化等。

⚠️ 常見錯誤：  

設計過程中不小心把 `:focus` 樣式取消，導致無法辨識焦點

🔧 建議：務必保留或自訂明顯的 `:focus` 樣式，讓鍵盤操作有清晰的引導

9. 可跳過重複內容（如導覽列）

為了提升無障礙體驗，應在頁面最上方提供「跳至主內容」的連結，讓使用者（尤其是使用螢幕閱讀器者）可略過重複出現的導覽列等區塊。

🔧 CSS 提示：平時隱藏，聚焦時顯示（用於鍵盤操作）

10. 動態內容須可控制

輪播圖、影片、背景動畫等自動播放內容，必須提供「暫停 / 停止 / 隱藏」的控制機制，避免干擾視線或影響可讀性。

🎥 注意項目：

• 輪播圖切換時間太短會讓使用者無法閱讀
• 背景影片或動畫若不斷重播，應提供暫停按鈕或靜音選項

📚 W3C 指引建議：超過 5 秒的動態內容應具備控制權限，並提供可預期的行為

結語

透過合理的色彩對比、完整的替代文字、清晰的表單標示，以及全鍵盤操作與焦點指示等設計，能讓視覺障礙者、長者、臨時性障礙者，甚至一般使用者，都能擁有順暢、友善的使用體驗。

此外，響應式設計與可調整文字的彈性，也確保了網站在各種裝置與瀏覽情境下皆具備良好可讀性與操作性。當動態內容具備暫停與控制機制，更能避免干擾與失焦，讓使用者擁有自主的瀏覽節奏。

打造無障礙網站，不只是技術實作，更是一種使用者體驗的全面升級。

讓每一位使用者都能無障礙地接觸、理解與參與，才是真正「為人設計」的網站。