如何讓你的網站無障礙：WCAG 2.2 入門指南

要讓網站無障礙，就要讓它能用鍵盤、螢幕閱讀器、縮放功能或切換裝置操作，而不只能用滑鼠：按鈕、連結、標題與表單標籤都使用真正的 HTML 元素；圖片提供有意義的替代文字；保持文字的高對比；並讓焦點清楚可見。你要瞄準的標準是 WCAG 2.2 AA 等級。自動檢查工具只能找出部分問題；花十分鐘用鍵盤與螢幕閱讀器測試，才能發現其餘大部分的問題。

「無障礙」在實務上是什麼意思

無障礙關乎人：一位失明並使用螢幕閱讀器的人、一位手部顫抖、只能用鍵盤瀏覽的人、一位需要將畫面放大到 200% 的低視力使用者、一位在強烈陽光下閱讀的人，或是一位暫時手腕受傷的人。良好的無障礙設計通常也會讓所有人的體驗更好：結構更清楚、文字更易讀、表單會說明錯誤在哪裡。

參考標準是 W3C 的網頁內容無障礙指南（WCAG）。截至 2026 年 9 月，目前的版本是 WCAG 2.2（2023 年 10 月發布，2024 年 12 月更新）；WCAG 3 還是早期草案。WCAG 以四項原則為核心：內容必須可感知、可操作、可理解且穩健，並分為三個符合等級：

部分地區的法規會引用 WCAG，例如歐盟的《歐洲無障礙法》，自 2025 年 6 月起已適用於許多面向消費者的數位服務。哪些規定適用於你，取決於你營運的地區與你銷售的內容；如有疑問，請諮詢專業顧問。本指南涵蓋的是實務上的做法。

達成目標的方法

對大多數小型網站來說，前兩種就已足夠：告訴 AI 從一開始就以無障礙方式建置，然後在上線前進行稽核。

最重要的修正

使用正確的 HTML 元素

大多數無障礙功能，只要 HTML 寫對就能自動獲得。<button> 可以取得焦點、能用 Enter 與空白鍵操作，並會被朗讀為按鈕。加上點擊處理函式的 <div> 則什麼都不是。AI 生成的程式碼有時會把所有東西都做成加上樣式的 div；請要求使用語意化元素：

• 動作用 <button>，導覽用 <a href>
• 每頁一個 <h1>，然後依序使用 <h2>、<h3>——螢幕閱讀器的使用者會利用標題在頁面間跳躍
• 地標：<header>、<nav>、<main>、<footer>
• 每個表單欄位都要連接一個 <label>
• 在 <html lang="zh-TW"> 中設定頁面的語言

只有在沒有合適的原生元素時，才使用 ARIA 屬性；例如自訂的分頁籤組或組合框。錯誤的 ARIA 比完全不用更糟。

鍵盤操作與可見的焦點

任何能用滑鼠完成的操作，都必須能只用鍵盤完成（WCAG 2.1.1）。用 Tab 鍵瀏覽整個頁面：每個連結、按鈕與欄位都應該能依合理的順序到達，而且你永遠看得到焦點在哪裡（2.4.7 焦點可見）。WCAG 2.2 新增要求：獲得焦點的元素不得被固定的標題列或 Cookie 橫幅完全遮住（2.4.11，AA 等級）。

常見的失敗情況包括：只能用滑鼠懸停開啟的選單、無法鎖定焦點或無法用 Escape 關閉的對話框，以及 CSS 中有 outline: none 卻沒有任何替代方案。

文字替代方案

每張有意義的圖片都需要替代文字，並在情境中說明它顯示的內容（「主廚擺盤的試吃套餐」，而不是「image1.jpg」）。裝飾性圖片應使用空的 alt=""，讓螢幕閱讀器略過。僅含圖示的按鈕需要可辨識的名稱（「關閉」、「搜尋」）。影片需要字幕；音訊需要逐字稿。

顏色與對比度

WCAG 2.2 AA 要求一般文字的對比度至少為 4.5:1（1.4.3），大型文字為 3:1；而輸入框邊框與有意義的圖示等介面元件則為 3:1（1.4.11）。淺灰色的預留提示文字與淡色按鈕，是最常見的失敗情況。此外，永遠不要只用顏色來傳達意義：無效欄位上的紅色邊框，還需要搭配錯誤訊息。

縮放與重排

文字放大到 200% 時仍必須可用（1.4.4），內容在 320 CSS 像素寬度下也必須能正常運作，不需要左右捲動（1.4.10）。一個妥善的響應式版面能處理大部分的這類問題。

點擊目標、表單與錯誤

• 目標大小：WCAG 2.2 AA 要求指標目標至少為 24 × 24 CSS 像素，或是小型目標周圍要有足夠的間距（2.5.8）。越大越適合手機操作。
• 表單：可見的標籤（而不只是預留提示文字）、清楚的說明，以及告訴使用者錯誤是什麼、如何修正的錯誤訊息，並顯示在欄位旁邊。
• 登入：不要讓人解謎或抄寫驗證碼，除非另有替代方案；允許密碼管理工具與貼上密碼（3.3.8 無障礙驗證）。

有效的提示詞

請依 WCAG 2.2 AA 等級建置這個網站：語意化的 HTML 地標、每頁一個 h1 且標題依序排列、真正的按鈕與連結元素、每個表單欄位都有標籤、可見的焦點樣式、文字對比度至少 4.5:1、有意義的圖片提供替代文字、裝飾性圖片使用 alt=""，並設定 html lang。

請稽核 /signup 與 /checkout 頁面的無障礙性。檢查純鍵盤操作、焦點順序、可見的焦點、標籤、錯誤訊息、對比度，以及僅含圖示按鈕的螢幕閱讀器名稱。列出每個問題對應的 WCAG 條款，然後在不過度改變視覺設計的前提下修正。

手機版選單無法用鍵盤操作。請把它改成帶有 aria-expanded 的按鈕，開啟時把焦點移入選單，按 Escape 關閉，並把焦點送回按鈕。

逐步操作

1. 執行自動檢查。 使用 Chrome 開發者工具中的 Lighthouse 無障礙區段，或 axe 瀏覽器擴充功能，檢查每個主要頁面。修正它回報的所有問題。
2. 不用滑鼠。 用 Tab 鍵瀏覽每個頁面，並完成所有關鍵任務：註冊、搜尋、結帳。記下任何無法到達、看不到焦點或無法離開的地方。
3. 將畫面放大到 200%，並把視窗縮到手機寬度。不應有任何內容被切掉，也不應需要左右捲動。
4. 用螢幕閱讀器試用十分鐘：Mac 與 iPhone 上的 VoiceOver、Android 上的 TalkBack，或 Windows 上的 NVDA（免費）。聽聽標題、連結與表單欄位。只聽到沒有名稱的「按鈕」，或「連結，點擊這裡」，就表示還有工作要做。
5. 檢查對比度：使用對比度檢查工具，檢查文字、按鈕與輸入框。
6. 修正，然後重新測試同樣的任務。
7. 發布無障礙聲明，說明你以哪個標準為目標，以及如何回報問題，並且回覆這些回報。

常見錯誤

• 依賴覆蓋式小工具，而不修正程式碼。
• 因為焦點外框看起來不整齊就把它移除，卻沒有替代方案。
• 只用預留提示文字當標籤。 使用者開始輸入後它就消失，而且常常對比度很低。
• 「點擊這裡」與「閱讀更多」連結。 脫離情境後，螢幕閱讀器的使用者只會聽到一串相同的連結。
• 替代文字塞滿關鍵字。 替代文字是給人看的；請描述圖片內容。
• 只測試一次。 每個新功能都可能破壞鍵盤操作。請把鍵盤測試加入你的上線前測試。

無障礙檢查清單

• 主要頁面通過自動檢查（Lighthouse 或 axe）且無錯誤
• 所有任務都能只用鍵盤完成
• 焦點永遠可見，且不會被固定元素遮住
• 語意化的標題、地標、按鈕與連結；已設定 lang
• 有意義的替代文字；裝飾性圖片為 alt=""；影片有字幕
• 文字對比度 ≥ 4.5:1（大型文字 ≥ 3:1）；介面元件 ≥ 3:1
• 在 200% 縮放與 320 px 寬度下可正常運作
• 每個表單欄位都有可見的標籤與清楚的錯誤訊息
• 有無障礙聲明，並提供回報問題的方式

若想了解背後的概念，請閱讀什麼是網頁無障礙。無障礙設計與良好的視覺設計有大量重疊之處；如何用 AI 設計美觀的 App涵蓋了視覺面向。

Mythex 上的無障礙

Mythex 會依照你要求的標準建置，因此請在第一則提示與後續訊息中寫上「WCAG 2.2 AA」。你可以使用預覽的手機尺寸外框檢查小螢幕（預覽與程式碼），但鍵盤、縮放與螢幕閱讀器測試，在已發布的網址或在獨立分頁中開啟的預覽上效果最好。請 Agent 稽核某個頁面、修正它找到的問題，然後自己測試這些修正——自動檢查只是起點，並不代表通過驗收。

常見問題