想做無障礙網站，卻覺得一聽到 WCAG、WAI-ARIA 就頭痛？其實你每天都在用「無障礙」——只是沒意識到而已。
你早就在用的無障礙：不只是輪椅坡道
捷運出口的坡道、影片打開字幕、手機字體調大，這些都是無障礙設計。對行動不便的人是必需，但對一般使用者，其實是「更好用」。
網站也一樣：字太小、對比太淡、按鈕太擠，不只視障朋友難用，你的客戶也懶得看。無障礙網站做得好，就是在幫所有人省力。
為什麼現在一定要開始做無障礙？
三個關鍵理由，跟你以為的不太一樣：
- 法規壓力變大：台灣公部門與委外專案，多半要求符合「無障礙網頁開發規範」（以 WCAG 為基礎）。企業標案也越來越常把「無障礙檢測通過」當投標門檻。
- SEO 與流量：Google 會看結構、標題階層、替代文字，這些本來就是無障礙網站的核心。你為了無障礙做結構調整，等於同時在做 SEO。
- AI 助讀時代：越來越多人用螢幕報讀或 AI Voice 朗讀網頁。假如你的按鈕只寫「更多」、「點這裡」，機器根本講不出這是什麼功能。
用超白話認識 WCAG、ARIA 與 2025 更新
WCAG 是什麼？可以把它想像成「網站無障礙教學大綱」，原則只有四個：看得到（可感知）、用得到（可操作）、看得懂（可理解）、機器也看得懂（健全相容）。
常聽到的名詞：
- 替代文字（alt）：圖片看不到時，讀出的一句話。
- 標題階層（h1～h6）：幫內容分層，讓閱讀器「跳段落」。
- 鍵盤操作：不用滑鼠，只用 Tab、Enter 就能操作網站。
- WAI-ARIA：補充 HTML 語意的「角色標籤」，讓動態元件（像手風琴、彈窗）對助讀工具有意義。
2025 之後要注意什麼？WCAG 2.2 / 2.2 之後版本更在意行動裝置、焦點可見、操作目標大小等細節；ARIA 2025 的重點，是讓互動元件更一致、減少濫用自訂 role，回到「先用好原生 HTML，再補 ARIA」的原則。
馬上能做的 10 個高 CP 無障礙優化
先從「不用改架構、不用後端」的地方開始，開發、行銷、設計都能動手：
- 調整文字大小至少 16px，行高 1.5 左右。
- 確保文字與背景對比度，高彩度色塊配白字要特別檢查。
- 圖片加上有意義的 alt，純裝飾圖片標記為空 alt。
- 按鈕文字改成「加入購物車」、「下載報價單」這種動作＋對象。
- 表單欄位一定要有標籤（label），必填欄位標註清楚。
- 所有超連結要有可理解的文字，避免只寫「更多」、「點我」。
- 用 h2、h3 合理切段，不要為了字變大，用標題標籤當樣式。
- 避免自動播放聲音或輪播，至少要提供暫停、上一張、下一張按鈕。
- 確保鍵盤 Tab 可以依序走訪所有操作元件，焦點有清楚外框。
- 錯誤訊息貼近欄位顯示，並用顏色＋圖示或文字，避免只靠顏色辨識。
自我檢測：用免費外掛與線上工具快速掃一次
不用馬上找廠商，先自己粗檢一輪，你會更知道要發什麼需求：
工具類型 |
用途 |
|---|---|
瀏覽器外掛（如 WAVE、axe DevTools） |
一鍵標出對比不足、缺 alt、標題結構錯誤 |
線上對比檢測 |
輸入兩個色碼，檢查是否符合 WCAG 對比標準 |
螢幕報讀＋鍵盤測試 |
打開系統內建朗讀工具，搭配 Tab 操作一遍重要頁面 |
建議流程很簡單：
- 先選 3 個關鍵頁（首頁、產品頁、表單）。
- 用外掛掃一次，看報告上出現最多的錯誤類型。
- 開啟螢幕報讀＋鍵盤，只用 Tab、Enter 走完流程，感受哪裡卡。
把無障礙變成日常：實戰清單＋維護節奏
先做到「關鍵 20%」，就能解決超過一半的無障礙問題。
立刻可以開始的清單：
- 本週：挑 3 頁做字級、對比度、標題階層調整。
- 下週：補齊圖片 alt、改寫按鈕與連結文字。
- 本月：建立「新頁面檢查表」，新增頁面前先過一輪（表單標籤、鍵盤操作、錯誤訊息）。
- 每季：用外掛、線上工具與鍵盤實測，重新掃一次重要頁面。
當你把這套流程跑個兩三輪，就會發現：無障礙網站一點都不神秘，它只是把「本來就該做到的好體驗」說得更清楚。現在就挑一頁官網，打開檢測工具試一次，你會很快看到哪裡最值得先改。