什麼是網頁無障礙？WCAG 與共融設計說明
網頁無障礙是指建置網站與應用程式時，讓身心障礙者也能使用它們——無論他們是視障者使用螢幕閱讀器、無法使用滑鼠、低視力或色盲、聽障，或有認知或學習障礙。實務上，它包括圖片的替代文字、足夠的色彩對比、有適當標籤的表單，以及所有功能都能只靠鍵盤操作。這方面的國際標準是 WCAG，即 W3C 發布的網頁內容無障礙指南。
無障礙常被簡稱為 a11y——「a」，接著 11 個字母，然後是「y」。
為什麼用 AI 建置時要重視無障礙
AI 建置工具很擅長做出看起來正確的應用程式。無障礙主要關乎你在截圖中看不到的部分：一個按鈕是否真的是按鈕、一個輸入欄位是否有螢幕閱讀器能唸出的標籤、你能否用 Tab 鍵走到選單。
因此，有幾點值得你確認：
- 很容易被忽略。 一個自訂樣式的下拉選單可能看起來很完美，但若不用滑鼠就完全無法使用。除非你測試，否則不會發現。
- 一開始就做對比較划算。 在第一則提示就要求無障礙元件，幾乎沒有額外成本。等應用程式完成後再補救，就得修改每一個畫面。
- 對所有人都有幫助。 字幕能幫助吵雜環境中的人，良好的對比能幫助陽光下用手機的人，清楚的標籤則能讓每個人更快填完表單。
- 與 SEO 有重疊。 適當的標題結構、描述性的連結和替代文字，也能幫助搜尋引擎理解你的頁面——參閱 AI 建置網站的 SEO。
- 可能是法律要求。 視你營運的地點與服務對象而定，無障礙可能是法定義務。
日常比喻
想像一棟建築物的入口。
台階對許多人來說沒問題。但坡道讓輪椅使用者可以進入——也讓推嬰兒車的家長、推著推車的送貨員和拖著行李箱的旅客受惠。自動門、清楚的指示牌、電梯按鈕上的點字，以及良好的照明，每一樣都為某些人移除了一道障礙。
網頁無障礙就是數位空間裡的同樣道理：你應用程式的坡道、指示牌與扶手。而且就像建築物一樣，把坡道納入設計圖，比混凝土凝固後再加裝要容易得多。
WCAG 簡介
WCAG 由 W3C 的網頁無障礙倡議（WAI）發布。目前版本是 WCAG 2.2，於 2023 年 10 月首次發布。它具有向後相容性：符合 WCAG 2.2 的內容也符合 2.1 和 2.0，W3C 也鼓勵使用最新版本。WCAG 2.2 同時已被核准為國際標準 ISO/IEC 40500:2025。另外，一個截然不同的 WCAG 3 目前仍在開發中，屬於早期草案，尚非定案的標準。
WCAG 依照四項原則組織，常以 POUR 來記憶：
| 原則 | 意義 | 範例 |
|---|---|---|
| 可感知（Perceivable） | 人們能以他們使用的感官接收內容 | 圖片的替代文字、影片字幕、足夠的對比 |
| 可操作（Operable） | 人們能使用控制項並瀏覽 | 鍵盤操作、不能延長的時間限制、可見的焦點 |
| 可理解（Understandable） | 內容與行為合乎邏輯 | 清楚的標籤、有幫助的錯誤訊息、一致的導覽 |
| 穩健（Robust） | 能與各種瀏覽器和輔助科技搭配運作 | 正確的 HTML 元素、控制項正確的名稱與角色 |
每條指引都有可測試的成功準則，分為三個等級：
- A 級——最低要求。無法達到時，會完全阻擋部分人士。
- AA 級——標準目標，也是大多數法規與政策所依據的等級。
- AAA 級——最高等級。在某些地方值得努力，但 W3C 不建議要求整個網站都達到，因為部分內容無法做到。
WCAG 2.2 在 2.1 的基礎上新增了九項成功準則，包括 AA 等級的目標大小（最小）——可點擊的目標一般應至少為 24 x 24 CSS 像素，並有例外情況——以及無障礙驗證（最小），限制需要依賴記憶或拼圖的登入步驟，例如必須重新輸入密碼卻不允許貼上。它也移除了過時的舊「解析（Parsing）」準則。
實例：註冊表單
以下是 AI 可能產生的註冊表單，以及無障礙檢查會發現的問題：
| 問題 | 受影響的人 | 修正方式 |
|---|---|---|
| 輸入欄位用佔位文字（「Email」）取代標籤 | 螢幕閱讀器使用者；以及開始輸入後就忘了欄位用途的人 | 每個輸入框都有可見、並與之連結的 <label> |
| 白底上的淺灰文字，對比遠低於 4.5:1 | 低視力者、戶外的人 | 較深的文字，達到 4.5:1 的對比度 |
| 錯誤只以紅色邊框顯示 | 色盲使用者、螢幕閱讀器使用者 | 在欄位旁顯示文字訊息，並讓螢幕閱讀器播報 |
「註冊」是樣式化的 <div>，而非 <button> | 鍵盤與螢幕閱讀器使用者無法啟動它 | 使用真正的 <button> 元素 |
| 用 Tab 鍵切換欄位時沒有可見的外框 | 鍵盤使用者不知道目前位置 | 清楚的焦點樣式 |
| 標誌圖片沒有替代文字 | 螢幕閱讀器使用者只會聽到檔名 | 替代文字，例如「Acme Bookings」 |
這些修正大多不會明顯改變表單的外觀。但它們全都決定了某些人能否使用它。
關鍵術語
| 術語 | 意義 |
|---|---|
| 螢幕閱讀器 | 將螢幕內容朗讀出來或輸出到點字顯示器的軟體，例如 VoiceOver、NVDA 或 JAWS。 |
| 替代文字（Alt text） | 圖片的文字描述，供螢幕閱讀器朗讀。純裝飾性圖片會給予空的替代文字，使其被略過。 |
| 對比度（Contrast ratio） | 文字與背景顏色的差異程度，從 1:1 到 21:1。 |
| 鍵盤操作（Keyboard navigation） | 不用滑鼠，改用 Tab、Enter、空白鍵與方向鍵瀏覽網站。 |
| 焦點指示器（Focus indicator） | 顯示鍵盤目前位於哪個元素的可見外框。 |
| 語意化 HTML（Semantic HTML） | 為任務選用正確的元素——<button>、<nav>、<h2>——讓瀏覽器與輔助科技理解頁面。 |
| ARIA | 為自訂控制項向輔助科技描述的額外屬性。應謹慎使用；優先使用原生 HTML 元素。 |
| 輔助科技（Assistive technology） | 人們用來存取電腦的工具，從螢幕閱讀器到切換裝置與語音控制皆是。 |
常見迷思
- 「無障礙只對視障者重要。」 它涵蓋視覺、動作、聽力、語言與認知障礙，也包括暫時性的狀況，例如手臂受傷。
- 「無障礙的網站看起來很單調。」 無障礙只會限制一些事項——對比、焦點樣式、文字大小——但外觀好看的無障礙網站才是常態，而非例外。
- 「自動檢查工具得了 100 分，就大功告成。」 自動化工具只能發現部分問題。替代文字是否真正有意義，或是使用螢幕閱讀器時流程是否合理，仍需要人來檢查。
- 「覆蓋層小工具能讓我們合規。」 外加的工具列無法修正程式碼中缺少的標籤或損壞的鍵盤操作。要從源頭修正。
- 「我們沒有身心障礙的使用者。」 你可能只是不知道。許多障礙並不明顯，而遇到障礙的人通常會直接離開。
向 AI 建置工具提出的要求
- 「請依 WCAG 2.2 AA 等級建置。」
- 「使用語意化 HTML：真正的按鈕、連結、依序排列的標題，以及每個表單欄位的標籤。」
- 「確保每個互動元素都能只靠鍵盤操作，並有可見的焦點樣式。」
- 「檢查所有文字與圖示顏色的對比度：一般文字 4.5:1，大型文字與圖示 3:1。」
- 「為資訊性圖片加上有意義的替代文字，為裝飾性圖片使用空的替代文字。」
- 「表單錯誤要以文字顯示，並與欄位連結，而不只是用顏色標示。」
- 「動畫要尊重使用者的減少動態設定。」
- 「執行自動化無障礙檢查，並列出它無法測試的項目，讓我能手動檢查。」
接著親自測試：把滑鼠放在一旁，只用 Tab、Shift+Tab、Enter 和空白鍵完成主要流程。試著用手機內建的螢幕閱讀器朗讀首頁。把瀏覽器縮放到 200%，看看是否有任何地方出問題。
Mythex 中的無障礙
Mythex 沒有專門的無障礙檢查工具，因此請把無障礙視為提示內容與測試的一部分。從第一則提示就要求 WCAG 2.2 AA，在預覽中用鍵盤檢查結果，並在發佈前使用 /test，讓代理程式逐一點擊你的主要流程——參閱應用程式測試。SEO 指南也會要求語意化的標題與有意義的替代文字，兩者同時服務於這兩個目標。
如需實作檢查清單，請參閱如何讓網站無障礙。設計方面，請閱讀如何用 AI 設計美觀的應用程式，上線前則參閱如何在上線前測試應用程式。W3C 的 WCAG 概覽則是權威來源。
常見問題
用簡單的話來說，什麼是網頁無障礙？
網頁無障礙是指在設計與建置網站和應用程式時，讓身心障礙者能夠感知、理解、瀏覽與使用它們。這包括使用螢幕閱讀器的視障者、無法使用滑鼠的人、低視力或色盲者、聽障使用者，以及有認知障礙的人。
什麼是 WCAG？
WCAG（網頁內容無障礙指南）是網頁無障礙的國際標準，由 W3C 發布。目前的版本是 WCAG 2.2，於 2023 年 10 月首次發布。其成功準則分為 A、AA 和 AAA 三個等級，而大多數機構與法規所指的目標是 AA 等級。
WCAG 對色彩對比有什麼要求？
在 AA 等級中，一般文字與背景的對比度至少需要 4.5:1；大型文字（約 18 點，或 14 點粗體）至少需要 3:1。圖示以及控制項的可見部分，與相鄰內容之間至少需要 3:1。
網頁無障礙是法律要求嗎？
在許多地方、許多機構來說，是的。法規因國家與產業而異——例如，歐盟的《歐洲無障礙法》涵蓋歐盟許多消費者數位產品與服務。請確認適用於你的規定，或諮詢法律顧問。
無障礙覆蓋層或小工具能讓我的網站合規嗎？
不能單靠它。覆蓋層會在你的網站上方加入一個工具列，但無法可靠地修正底層問題，例如缺少標籤、無法用鍵盤操作，或結構不清楚。可靠的做法是修正網站的程式碼與內容。