如何令你嘅網站無障礙：WCAG 2.2 入門指南
要令網站無障礙，就要讓人可以用鍵盤、螢幕閱讀器、縮放或者開關裝置，而唔單止用滑鼠來使用：按鈕、連結、標題同表單標籤都要使用真正嘅 HTML 元素；圖片要有有意義嘅替代文字；文字對比度要高，焦點要清楚可見。目標標準係 WCAG 2.2 AA 級。自動檢測工具只能發現部分問題；一段十分鐘嘅鍵盤同螢幕閱讀器測試，可以發現大部分其餘問題。
實際上「無障礙」係咩意思
無障礙關乎人：有人係盲人，用螢幕閱讀器；有人手震，用鍵盤瀏覽；有人視力弱，要放大至 200%；有人喺陽光下閱讀；有人手腕暫時受傷。好嘅無障礙設計，通常令網站對所有人都更好：結構更清晰、文字更易讀、表單會解釋自己嘅錯誤。
參考標準係 W3C 嘅《網頁內容無障礙指引》（WCAG）。截至 2026 年 9 月，目前版本係 WCAG 2.2（2023 年 10 月發布，2024 年 12 月更新）；WCAG 3 仍然係早期草稿。WCAG 圍繞四項原則組織——內容必須可感知、可操作、可理解、穩健——並分為三個符合級別：
| 級別 | 意思 | 適用對象 |
|---|---|---|
| A | 最低要求；冇咗呢個級別，有啲人根本無法使用網站 | 所有人 |
| AA | 常見目標；涵蓋對比度、焦點、縮放同錯誤處理 | 大部分機構同好多法例 |
| AAA | 最嚴格；並非所有內容都做得到 | 特定服務同受眾 |
多個地方嘅法例都會引用 WCAG——例如歐盟《無障礙法案》，自 2025 年 6 月起適用於歐盟內許多面向消費者嘅數碼服務。邊啲規定適用於你，視乎你喺邊度營運，以及你賣緊咩；如果唔確定，請諮詢專業人士。本指南主要講實際操作。
方法：點樣達到目標
| 方法 | 適合 | 取捨 |
|---|---|---|
| 由一開始就建立無障礙 | 新網站同新應用程式 | 整體上工夫最少；需要事先說明 |
| 審核同修正 | 現有網站 | 能找出真正問題；每頁都要集中處理 |
| 專業審核 | 受監管行業、大型網站、公營機構 | 全面而且有文件紀錄；需要付費 |
| 覆蓋層小工具 | 不建議 | 無法修正底層程式碼 |
對於大部分小型網站，首兩種方法已經足夠：要求 AI 由一開始就以無障礙方式建立，然後上線前進行審核。
最重要嘅修正
使用正確嘅 HTML 元素
大部分無障礙功能，其實只要正確使用 HTML 就自動具備。<button> 可以聚焦、支援 Enter 同空白鍵，並會被讀作按鈕。帶有點擊處理程式嘅 <div> 則什麼都唔係。AI 生成嘅程式碼有時會將所有嘢都用加上樣式嘅 div 來做；所以要要求使用語意化元素：
<button>用於操作，<a href>用於導覽- 每頁一個
<h1>，然後按次序使用<h2>、<h3>——螢幕閱讀器使用者會跳躍於標題之間 - 地標：
<header>、<nav>、<main>、<footer> - 每個表單欄位都要連接
<label> - 用
<html lang="en">標示頁面語言
只有當冇合適嘅原生元素時，才使用 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，大型文字至少 3:1（1.4.3），而輸入框邊框同有意義圖示等介面部分則需要 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 關閉，並將焦點返回按鈕。
逐步做法
- 執行自動檢測。 喺 Chrome 開發人員工具嘅 Lighthouse 無障礙部分，或者 axe 瀏覽器擴充功能，逐一檢查主要頁面。修正佢報告嘅所有問題。
- 唔用滑鼠。 用 Tab 鍵瀏覽每一頁，完成每項主要任務——註冊、搜尋、結帳。記低任何你無法到達、看不到焦點，或者無法離開嘅地方。
- 放大至 200%，並將視窗收窄到手機闊度。唔應該有任何嘢被切走，或者需要左右捲動。
- 用螢幕閱讀器試用十分鐘：Mac 同 iPhone 上嘅 VoiceOver、Android 上嘅 TalkBack，或者 Windows 上免費嘅 NVDA。聽一下標題、連結同表單欄位。如果讀到「按鈕」但冇名稱，或者「連結，點擊這裡」，就表示仍有工作要做。
- 檢查對比度：用對比度檢查工具，檢查文字、按鈕同輸入框。
- 修正，然後重新測試同一批任務。
- 發布無障礙聲明，說明你以邊個標準為目標，以及點樣舉報問題——並且回覆呢啲舉報。
常見錯誤
- 依賴覆蓋層小工具，而唔係修正程式碼。
- 因為焦點外框睇落唔整齊而移除，卻冇替代樣式。
- 只用佔位文字作為唯一標籤。 用戶一開始輸入，佢就會消失，而且通常對比度低。
- 「點擊這裡」同「閱讀更多」連結。 離開上下文之後，螢幕閱讀器使用者只會聽到一串相同嘅連結。
- 替代文字塞滿關鍵字。 替代文字係為人而寫；要描述圖片。
- 只測試一次。 每個新功能都可能破壞鍵盤操作。將鍵盤測試加入你嘅上線前測試。
無障礙檢查清單
- 主要頁面嘅自動檢測（Lighthouse 或 axe）已經清除所有問題
- 每項任務都可以單靠鍵盤完成
- 焦點永遠可見，而且從不被固定元素遮蓋
- 語意化標題、地標、按鈕同連結；已設定
lang - 有意義嘅替代文字；裝飾性圖片使用
alt=""；影片有字幕 - 文字對比度 ≥ 4.5:1（大型文字 ≥ 3:1）；介面部分 ≥ 3:1
- 可以喺 200% 縮放同 320 px 闊度下使用
- 每個表單欄位都有可見嘅標籤，並有清楚嘅錯誤訊息
- 有無障礙聲明，並提供舉報問題嘅途徑
想了解背後嘅概念，可以閱讀什麼是網頁無障礙。無障礙設計同良好設計有好多重疊之處；如何用 AI 設計美觀嘅應用程式會講視覺方面嘅內容。
Mythex 上嘅無障礙
Mythex 會按你要求嘅標準建立網站，所以請喺第一個提示同之後嘅跟進訊息中寫明「WCAG 2.2 AA」。你可以使用預覽嘅手機尺寸框架檢查細螢幕（預覽與程式碼），但鍵盤、縮放同螢幕閱讀器測試，最好喺已發布嘅網址，或者喺獨立分頁開啟嘅預覽上進行。要求 agent 審核某頁、修正佢發現嘅問題，然後由你自己測試修正結果——自動檢測只是起點，並唔等於通過審核。
常見問題
網站目前嘅無障礙標準係咩？
截至 2026 年 9 月，W3C 目前嘅標準係 WCAG 2.2，於 2023 年 10 月首次發布。大部分機構同好多法例都以 AA 級為目標。WCAG 3 仍然係早期草稿。
無障礙覆蓋層可以令我嘅網站合規嗎？
唔好只依賴佢。覆蓋層會喺頁面上加一個工具列，但無法修正底層程式碼中缺少嘅標籤、損壞嘅鍵盤操作，或者差劣嘅結構。真正令網站可用，要修正網站本身。
自動檢測工具會找出所有問題嗎？
唔會。Lighthouse 同 axe 等工具可以發現缺少替代文字、對比度太低同冇標籤嘅欄位等問題，但好多問題——例如令人混淆嘅焦點次序、冇意義嘅連結文字，或者有替代文字但內容錯誤——需要人用鍵盤同螢幕閱讀器親自檢查。
WCAG 要求幾多對比度？
WCAG 2.2 AA 級要求一般文字至少 4.5:1，大型文字 3:1，而輸入框邊框同傳達意義嘅圖示等介面元件則為 3:1。