什麼係網頁無障礙？WCAG 同共融設計解說

網頁無障礙即係建構網站同 App 時，令殘疾人士都可以使用，無論佢哋係失明並使用螢幕閱讀器、唔能夠使用滑鼠、視力弱或者色盲、聾人，抑或有認知或學習障礙。實際上，佢主要涉及以下嘅事情：為圖片提供文字替代內容、有足夠嘅顏色對比度、表格有適當嘅標籤，以及所有功能單用鍵盤都可以操作。呢方面嘅國際標準係 WCAG，即 W3C 發布嘅網頁內容無障礙指引。

無障礙通常簡寫成 a11y：「a」，加上中間 11 個字母，再加「y」。

用 AI 建構時點解無障礙重要

AI 建構工具好擅長生成「睇落啱」嘅 App。但無障礙主要係截圖睇唔到嘅嘢：一個按鈕係咪真係按鈕、一個輸入框有冇螢幕閱讀器可以讀出嘅標籤、你可唔可以用 Tab 鍵去到選單。

所以要問清楚，原因係：

好容易漏掉。 一個自訂嘅下拉選單睇落完美，但如果冇滑鼠就完全用唔到。除非你特登測試，否則唔會發現。
早啲做好就平得多。 喺第一個提示就要求無障礙元件，成本幾乎為零。等 App 完成之後才補做，就要改動每一個畫面。
對所有人都有幫助。 字幕幫助喺嘈雜環境嘅人，良好嘅對比度幫助喺陽光下用手機嘅人，清晰嘅標籤幫助所有人更快填寫表格。
同 SEO 有重疊。 適當嘅標題、描述清楚嘅連結，同圖片替代文字，都幫助搜尋引擎理解你嘅頁面。參閱 SEO for AI-built websites。
可能係法律要求。 視乎你營運嘅地方同服務嘅對象，無障礙可能係一項法律責任。

日常比喻

諗吓一座大廈嘅入口。

樓梯對好多人都好用。斜道就對輪椅使用者有用，對推嬰兒車嘅家長、拖著手推車嘅送貨員同拖著行李箱嘅旅客，都有用。自動門、清楚嘅指示牌、電梯按鈕上嘅盲文，同良好嘅照明，每樣都幫某人移除一道障礙。

網頁無障礙就係同一個概念應用喺數碼空間：你 App 嘅斜道、指示牌同扶手。而且就好似大廈一樣，喺設計圖上加一條斜道，遠比混凝土凝固之後再加容易得多。

WCAG 簡介

WCAG 由 W3C 嘅網頁無障礙倡議發布。現時版本係 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 像素，設有例外；以及無障礙驗證（最低），限制依賴記憶或者謎題嘅登入步驟，例如要求你重新輸入密碼，但又唔容許貼上。佢亦移除咗舊嘅「解析」準則，因為已經過時。

實際例子：一個註冊表格

以下係一個 AI 可能生成嘅註冊表格，以及無障礙檢查會發現嘅問題：

問題	受影響嘅人	修正方法
輸入框用佔位文字（「Email」）代替標籤	螢幕閱讀器用戶；以及開始輸入之後就忘記欄位係乜嘢嘅人	每個輸入框都有可見嘅 `<label>` 連接
淺灰色文字放喺白色背景上，對比度遠低於 4.5:1	視力弱嘅人、戶外使用嘅人	改用較深嘅文字，達到 4.5:1 嘅對比度
錯誤只以紅色邊框顯示	色盲用戶、螢幕閱讀器用戶	喺欄位旁邊顯示文字訊息，並讓螢幕閱讀器讀出
「註冊」係一個有樣式嘅 `<div>`，而唔係 `<button>`	鍵盤同螢幕閱讀器用戶無法觸發佢	使用真正嘅 `<button>` 元素
用 Tab 鍵瀏覽欄位時冇可見嘅外框	鍵盤用戶唔知自己去到邊	清楚嘅焦點樣式
標誌圖片冇替代文字	螢幕閱讀器用戶只聽到檔案名稱	替代文字如「Acme Bookings」

呢啲修正都唔會大幅改變表格嘅外觀，但每一項都會改變某啲人能唔能夠使用佢。

常用詞語

詞語	意思
螢幕閱讀器（Screen reader）	將螢幕內容朗讀出嚟，或者輸出到盲文顯示器嘅軟件，例如 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，喺 Preview 入面用鍵盤檢查結果，並喺發佈前用 /test 讓 agent 逐一點擊你嘅主要流程（參閱 App Testing）。SEO 食譜亦要求語義化標題同有意義嘅替代文字，兩者都可以同時服務於無障礙同 SEO 目標。

如果想要一份實用清單，可以睇 how to make your website accessible。設計方面可以睇 how to design a good-looking app with AI，發佈之前則睇 how to test your app before launch。W3C 嘅 WCAG 概覽係權威來源。

常見問題

簡單嚟講，什麼係網頁無障礙？

網頁無障礙即係設計同建構網站同 App 時，令殘疾人士都可以感知、理解、瀏覽同使用。包括失明並使用螢幕閱讀器嘅人、唔能夠使用滑鼠嘅人、視力弱或者色盲嘅人、聽障用戶，以及有認知障礙嘅人。

什麼係 WCAG？

WCAG（網頁內容無障礙指引）係網頁無障礙嘅國際標準，由 W3C 發布。現時版本係 WCAG 2.2，於 2023 年 10 月首次發布。佢嘅成功準則分為 A、AA 同 AAA 三個等級，而 AA 級係大部分機構同法例所引用嘅目標。

WCAG 要求幾多嘅顏色對比度？

喺 AA 級，一般文字同背景之間嘅對比度至少要 4.5:1；大字（大約 18 點，或者粗體 14 點）至少要 3:1。圖示同控制項可見部分，同旁邊嘅背景至少要 3:1。

網頁無障礙係法律要求嗎？

喺好多地方、對好多機構嚟講，係。法例因國家同行業而異，例如歐盟《歐洲無障礙法》就涵蓋歐盟內好多消費者數碼產品同服務。請查清楚適用於你嘅規則，或者諮詢法律顧問。

無障礙覆蓋層或者小工具可以令我嘅網站合規嗎？

單靠佢哋唔可以。覆蓋層係喺你網站上加一個工具列，但無法可靠咁修正根本問題，例如缺少標籤、鍵盤無法操作，或者結構不清晰。可靠嘅做法係修正網站嘅代碼同內容。