全球超過 10 億人正經歷著某種形式的身心障礙。這大約佔全球人口的 15%。其中包括盲人或低視力者、聾人或聽力困難者、運動功能受限者、認知差異者，以及手臂骨折或偏頭痛等暫時性狀況的人。
當我們在建構網站時不考慮這些現實，我們不僅僅是造成不便。我們正在將人們拒於他人理所當然享有的資訊、服務和機會之外。無障礙不是一項功能，而是一種責任。
什麼是網頁無障礙
網頁無障礙意味著設計和開發網站，使身心障礙者能夠感知、理解、瀏覽和與之互動。這也意味著他們能夠為網路做出貢獻。
這不僅僅涉及螢幕閱讀器。無障礙涵蓋以下方面：
- 視覺：失明、低視力、色覺缺陷
- 聽覺：耳聾、聽力困難
- 運動功能：精細動作控制受限、震顫、癱瘓
- 認知：閱讀障礙、注意力不足過動症（ADHD）、記憶困難、學習障礙
- 暫時性和情境性：手腕骨折、螢幕上的強烈陽光、吵雜的環境、緩慢的網路
關鍵洞察是：無障礙設計對每個人都有幫助。字幕在吵雜的地方很有用。高對比在強光下很有用。鍵盤導覽對進階使用者很有用。清晰的文字對非母語使用者很有用。無障礙不是一種特殊模式——它就是好的設計。
WCAG 標準
**Web Content Accessibility Guidelines（WCAG，網頁內容無障礙指引）**是由 W3C 發布的網頁無障礙國際標準。目前版本為 WCAG 2.2，圍繞四個原則組織，其首字母縮寫為 POUR：
可感知（Perceivable）
資訊必須以所有使用者都能感知的方式呈現。
- 文字替代：每張圖片都需要一個描述其內容的
alt屬性。裝飾性圖片使用alt=""。 - 字幕和逐字稿：影片內容需要字幕；音訊內容需要逐字稿。
- 可調適的結構：移除樣式後內容仍應有意義。使用語意 HTML（
<h1>、<nav>、<main>、<article>），而不僅僅是視覺樣式。 - 可辨別的內容：足夠的色彩對比度、可調整大小的文字、不單獨透過顏色傳達資訊。
可操作（Operable）
使用者必須能夠操作介面。
- 鍵盤可存取：每個互動元素都必須僅透過鍵盤即可到達和使用。不要製造滑鼠陷阱。
- 充足的時間：如果內容有時間限制，使用者必須能夠延長或取消。
- 防止癲癇發作：避免每秒閃爍超過三次的內容。
- 可導覽：清楚的頁面標題、邏輯性的標題結構、跳轉導覽連結、可見的焦點指示器。
可理解（Understandable）
內容和介面必須可以理解。
- 可讀的文字：指定頁面語言（
lang屬性）。盡可能使用清晰、簡單的語言。 - 可預測的行為：導覽應保持一致。頁面不應意外地更改上下文。
- 輸入協助：為表單欄位加上清楚的標籤。提供有用的錯誤訊息，說明出了什麼問題以及如何修正。
健壯（Robust）
內容必須足夠健壯，能與目前和未來的技術相容。
- 有效的 HTML：輔助技術能夠可靠解析的正確語意標記。
- 名稱、角色、值：自訂元件必須向無障礙 API 公開其用途（需要時使用 ARIA）。
一致性等級
WCAG 定義了三個等級：
| 等級 | 意義 | 範例 |
|---|---|---|
| A | 最低無障礙要求 | 圖片有 alt 文字，頁面有標題 |
| AA | 大多數網站的標準目標 | 一般文字的色彩對比度至少為 4.5:1 |
| AAA | 最高等級，並非總是可以達成 | 對比度 7:1，所有影片提供手語 |
全球大多數法律都要求達到等級 AA 合規。這是你應該追求的標準。
常見障礙及修正方法
圖片缺少 alt 文字
問題：螢幕閱讀器使用者只會聽到「圖片」或什麼也聽不到。
修正方法：為每張資訊性圖片加上描述性的 alt 文字。裝飾性圖片使用 alt=""，讓螢幕閱讀器跳過它們。
<!-- Good -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorative -->
<img src="divider.svg" alt="" />
色彩對比度不足
問題：低視力或色覺缺陷的人無法閱讀文字。
修正方法：確保一般文字的對比度至少為 4.5:1，大號文字（18px 以上或 14px 粗體）的對比度至少為 3:1。使用對比度檢查工具驗證你的配色方案。
你現在就可以檢查色彩對比度。使用我們的對比度檢查器工具，即時查看 WCAG AA 和 AAA 的通過/未通過結果。
表單標籤缺失
問題：螢幕閱讀器使用者不知道表單欄位的用途。
修正方法：每個輸入欄位都需要一個透過 for 屬性關聯的可見 <label> 元素。
<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />
缺少鍵盤導覽
問題：無法使用滑鼠的使用者被困住了。
修正方法：使用預設支援鍵盤存取的原生 HTML 元素（<button>、<a>、<select>）。如果建構自訂元件，確保它們可以取得焦點並回應鍵盤事件。不要在未提供替代方案的情況下移除焦點外框。
頁面結構缺失
問題：螢幕閱讀器使用者無法有效率地導覽。
修正方法：使用語意 HTML。每頁一個 <h1>，邏輯性的標題層級（不跳過層級），地標元素（<nav>、<main>、<footer>）。
媒體自動播放
問題：意外的音訊會干擾螢幕閱讀器使用者。自動播放的影片可能引發癲癇或造成不適。
修正方法：永遠不要自動播放音訊。如果影片自動播放，確保預設靜音並提供暫停控制項。
顏色不能是唯一手段
永遠不要僅依賴顏色來傳達資訊。請考慮：
- 用紅色邊框標示錯誤的表單欄位還需要錯誤圖示或文字提示
- 帶有彩色線條的圖表還需要圖案、標籤或圖例
- 正文中的連結需要底線或其他視覺提示，而不僅僅是顏色變化
大約 8% 的男性和 0.5% 的女性有某種形式的色覺缺陷。考慮這一點進行設計不是邊緣案例——而是基本的包容性。
測試無障礙性
自動化測試
自動化工具大約能捕獲 30-40% 的無障礙問題。它們是很好的第一步，但不是完整的解決方案。
- axe DevTools（瀏覽器擴充功能）——掃描頁面並回報 WCAG 違規
- Lighthouse（Chrome DevTools 內建）——包含無障礙稽核
- WAVE（網頁工具）——顯示問題的視覺化覆蓋層
手動測試
許多無障礙問題需要人工判斷：
- 鍵盤測試：拔掉滑鼠，使用 Tab、Enter、Escape 和方向鍵瀏覽整個網站。你能到達所有內容嗎？焦點順序合理嗎？
- 螢幕閱讀器測試：嘗試 VoiceOver（Mac）、NVDA（Windows，免費）或 TalkBack（Android）。內容朗讀出來有意義嗎？
- 縮放測試：將瀏覽器縮放到 200%。版面仍然正常嗎？有內容被裁切或重疊嗎？
- 減少動態效果：在作業系統設定中啟用「減少動態效果」。動畫是否尊重這個偏好設定？
使用者測試
最有價值的回饋來自日常生活中實際使用輔助技術的人。如果預算允許，請將身心障礙使用者納入測試流程。
無障礙是一個光譜，而不是一個核取方塊
無障礙不是一個有終點線的一次性專案。它是一種持續的實踐。網站在變化，內容在增加，每次更新都可能帶來新的障礙。
目標不是完美。目標是持續改善以及對使用你所建構產品的人的真誠關懷。從影響最大的改變開始——色彩對比度、alt 文字、鍵盤導覽、表單標籤——然後逐步完善。
你移除的每一個障礙，都是為某人打開的一扇門。
快速檢查清單
- 所有圖片都有有意義的
alt文字（裝飾性圖片使用alt=""） - 色彩對比度滿足 WCAG AA（文字 4.5:1，大號文字 3:1）
- 所有表單欄位都有可見的標籤
- 網站完全可以透過鍵盤導覽
- 標題遵循邏輯層級
- 焦點指示器可見
- 頁面語言已設定（
<html>上的lang屬性） - 不單獨透過顏色傳達資訊
- 影片有字幕
- 動畫尊重
prefers-reduced-motion設定