網站無障礙設計入門：WCAG 2.2 重點、常見錯誤與企業官網檢查清單

一提到網站無障礙，很多企業主的第一反應是：「那是政府機關要做的吧？」但無障礙服務的對象，遠比想像中廣：視力退化的長輩、色弱的男性、手受傷暫時只能用單手的人、在大太陽底下看手機的人、用語音輸入的人。無障礙做得好的網站，對所有人都更好用。

這篇文章以 W3C 的 WCAG 2.2 規範與 WebAIM 的大規模調查為基礎，用白話說明無障礙的核心原則、2.2 版新增了什麼、最常見的錯誤有哪些，並整理一份企業官網可以自己檢查的清單。不需要先懂程式，也能看懂哪些地方該請工程師修。

WCAG 是什麼？2.2 版是現行標準

WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引）由全球資訊網協會 W3C 制定，是國際上最通用的網站無障礙標準。WCAG 2.2 於 2023 年 10 月 5 日成為 W3C 正式推薦標準，W3C 也在 2024 年 12 月發布了更新版本。

WCAG 的每一條「成功準則」分為三個等級：

W3C 說明，WCAG 2.0 與 2.1 的成功準則在 2.2 中基本維持不變，唯一的例外是 4.1.1 剖析（Parsing）已被視為過時並移除。也就是說，符合 2.2 的網站，基本上也符合 2.1 與 2.0。

台灣與國際的規範現況

在台灣，數位發展部推動政府網站無障礙，民間網站目前沒有強制要求，但可使用官方提供的 Freego 檢測工具自我檢查；政府相關規範以 WCAG 2.1 為主要依據。國際上，歐盟的《歐洲無障礙法案》（European Accessibility Act）已自 2025 年 6 月起適用，涵蓋電子商務等多種數位服務。如果你的網站有服務海外客戶、特別是歐洲市場，無障礙已經不只是加分題。

四大原則：POUR

WCAG 的所有準則都建立在四個原則上，簡稱 POUR：

1. 可感知（Perceivable）：資訊要能被使用者感知。看不到圖片的人要有替代文字；聽不到聲音的人要有字幕；顏色對比要足夠。
2. 可操作（Operable）：介面要能被操作。只用鍵盤也能完成所有功能、按鈕夠大、不要有讓人來不及反應的時間限制。
3. 可理解（Understandable）：內容和操作方式要能被理解。用語清楚、操作行為可預期、表單錯誤有明確說明。
4. 穩健（Robust）：網站要能和各種瀏覽器、輔助科技（如螢幕閱讀器）相容，例如使用正確的 HTML 元素。

WCAG 2.2 新增了哪些準則？

2.2 版新增 9 條成功準則，以下用白話整理，並標出等級：

對一般企業官網來說，最需要注意的是 2.4.11、2.5.8 與 3.2.6：固定頁首和浮動按鈕是否蓋住焦點、按鈕與連結是否太小太擠、客服資訊位置是否全站一致。2.5.8 的觸控尺寸也和手機版體驗直接相關，可搭配行動優先與 RWD 響應式設計一起檢查。

最常見的錯誤：WebAIM Million 告訴我們什麼

WebAIM 每年用自動化工具檢測全球前 100 萬個網站首頁，發表〈The WebAIM Million〉報告。2026 年的報告（2026 年 2 月檢測）顯示，95.9% 的首頁有可被偵測到的 WCAG 2 錯誤，平均每頁 56.1 個錯誤。最常見的六類問題如下：

好消息是，這六類問題都相對容易修正。換句話說，只要把這幾項做好，你的網站就能避開絕大多數網站都有的無障礙問題。需要注意的是，自動化工具只能抓出一部分問題，鍵盤操作、內容是否易懂等仍需要人工檢查。

六個最值得優先處理的項目

1. 文字對比

WCAG 1.4.3（AA 級）要求一般文字與背景的對比至少 4.5:1，大字至少 3:1。大字的定義是至少 18 點，或 14 點粗體（約等於 24 像素與 18.5 像素）。W3C 也說明，對比值是門檻，不會四捨五入，4.499:1 就是不合格。

常見的不合格案例：淺灰色內文、白字壓在淺色照片上、淺色按鈕配白字。字體與配色的完整做法，可參考網頁字體排版與配色。

2. 圖片替代文字

有意義的圖片要有替代文字（alt），描述圖片傳達的資訊；純裝飾性的圖片則把 alt 留空，讓螢幕閱讀器略過。替代文字同時也是圖片 SEO 的基本功，詳見頁面 SEO 檢查清單。

3. 表單標籤

每個輸入欄位都要有以程式關聯的標籤，不能只靠欄位內的灰色提示字。這也是表單填寫率的關鍵，詳見表單設計指南。

4. 連結與按鈕要有可讀文字

只放圖示的按鈕（放大鏡、漢堡選單、LINE 圖示），對螢幕閱讀器來說就是「按鈕」兩個字，使用者不知道它做什麼。要為這類按鈕提供文字名稱。連結文字也要具體，「點這裡」「了解更多」在螢幕閱讀器的連結清單中毫無意義。按鈕的文字與尺寸設計，可參考 CTA 按鈕設計指南。

5. 宣告網頁語言

在網頁程式碼中宣告語言（繁體中文台灣為 zh-Hant-TW 或 zh-TW），螢幕閱讀器才會用正確的語音念出內容。這通常只是一行設定，卻有超過一成的網站沒做。

6. 鍵盤可操作與焦點可見

拔掉滑鼠，只用 Tab、Shift+Tab、Enter 和方向鍵，能不能逛完你的網站、打開選單、送出表單？每次按 Tab 時，畫面上看不看得出現在停在哪裡？很多網站為了美觀移除了焦點外框，等於讓鍵盤使用者蒙著眼睛操作。

企業官網 30 分鐘自我檢查

不用等到全面改版，你現在就可以做這些檢查：

1. 鍵盤測試：只用鍵盤操作首頁、主選單與聯絡表單。
2. 放大測試：把瀏覽器放大到 200%，內容是否仍可閱讀、不需要左右捲動？
3. 對比檢查：用瀏覽器開發者工具或線上對比檢測工具，檢查內文、按鈕與連結的對比。
4. 自動化檢測：使用 Lighthouse、WAVE 或 Freego 等工具掃描主要頁面，先修最常見的錯誤。
5. 螢幕閱讀器試聽：iPhone 的 VoiceOver、Android 的 TalkBack 都是內建功能，打開聽聽看你的首頁被念成什麼樣子。
6. 影片與動畫：影片是否有字幕？自動播放的輪播是否能暫停？

無障礙和 SEO、轉換率的關係

無障礙不是額外的負擔，它和網站的其他目標高度重疊：

• SEO：替代文字、清楚的標題階層、具體的連結文字、正確的 HTML 結構，也都是搜尋引擎理解頁面的依據。
• 轉換率：對比清楚的按鈕、有標籤的表單、明確的錯誤提示，會讓所有使用者更容易完成詢價與購買。
• 品牌形象：台灣正在快速高齡化，對長輩友善的網站，本身就是一種服務品質的展現。

常見問題

民間企業網站一定要符合 WCAG 嗎？

在台灣，目前主要是政府網站有無障礙規範要求，民間網站沒有一體適用的強制規定。但若你的網站服務海外市場，例如歐盟，可能適用當地法規。即使沒有法律要求，符合 WCAG 也能改善所有使用者的體驗。

裝一個無障礙外掛或工具列，就算完成了嗎？

不算。無障礙問題多半來自網站本身的結構與內容，例如缺少替代文字、表單沒有標籤、鍵盤無法操作，外掛工具列無法從根本修正這些問題。應該在設計與開發階段就把無障礙納入。

要做到 AAA 等級嗎？

一般建議以 AA 等級為目標，這也是多數國際法規與政府規範採用的標準。部分 AAA 準則對某些內容難以全面達成，可以針對重要頁面或功能選擇性採用。

改版時做無障礙會增加很多成本嗎？

從設計階段就納入，增加的成本通常有限，因為多數項目是設計規範與開發習慣的問題，例如配色對比、標籤、語意化 HTML。網站上線後才回頭修補，反而需要逐頁檢查，成本更高。

結語：無障礙是讓「每一個人」都能成為你的客人

網站無障礙不是為少數人做的特別功能，而是確保每一位訪客——不論年齡、能力或使用情境——都能看到你的內容、完成詢價。WCAG 2.2 提供了清楚的標準，WebAIM 的調查則告訴我們，先修好對比、替代文字、表單標籤、連結與按鈕文字，就能解決大部分問題。

網軍行銷的網站設計服務在設計與開發階段就會納入色彩對比、鍵盤操作與語意化結構等無障礙檢查。想了解官網設計的完整流程，可以參考企業官網設計完整指南。

參考資料

• W3C，Web Content Accessibility Guidelines (WCAG) 2.2：https://www.w3.org/TR/WCAG22/
• W3C WAI，What's New in WCAG 2.2：https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/
• W3C WAI，Understanding Success Criterion 1.4.3: Contrast (Minimum)：https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C WAI，Understanding Success Criterion 2.5.8: Target Size (Minimum)：https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
• WebAIM，The WebAIM Million（2026 年報告）：https://webaim.org/projects/million/