每年標案季都會重演同一幕：規格書第七頁寫著「網站須符合數位發展部網站無障礙規範，並取得 AA 等級標章」，承辦人把文件轉給網頁廠商，廠商回一句「我們的網站都是 RWD，應該沒問題」。等到真的拿檢測工具跑過去，才發現首頁一百多個錯誤，距離投標只剩三週。
無障礙不是「把字放大」那麼簡單，它是一套有條文、有檢測碼、有標章效期的規範。更現實的是，它正在從「政府機關的事」變成一般企業官網也躲不掉的事——台灣六十五歲以上人口已超過五分之一，老花、手抖、視力退化的使用者本來就在你的客戶名單裡；而無障礙要求的語意標籤、圖片替代文字、清楚的標題階層，恰好也是搜尋引擎理解頁面的依據。這篇把 AA 等級實際在要求什麼、自己能先檢查哪幾項、標章怎麼申請，整理成一份看得懂的清單。
Photo by Irsyad Rifqi on Unsplash
一、AA 等級到底在要求什麼
台灣的規範源頭是 W3C 的 WCAG（Web Content Accessibility Guidelines），由主管機關轉譯成國內版本。長期適用的是「網站無障礙規範（110.07）」，架構是四大原則、十三項指引，再往下拆成數十條成功準則與對應的檢測碼，分成 A、AA、AAA 三個等級。
四大原則用白話講就是：可感知（看不到的人要有辦法知道畫面上有什麼）、可操作（不用滑鼠也要能走完）、可理解（內容與操作邏輯不會讓人猜）、穩健性（程式碼寫得夠標準，輔助科技才讀得動）。
等級的差別不是「做多做少」，而是「硬性與否」：A 級是不做就會有使用者直接被擋在門外的底線；AA 級是移除顯著障礙的門檻，也是公部門標案普遍指定的等級；AAA 級屬於加分，實務上很少強制。立法院過去曾決議，各級政府機關與學校的網站新設或改版，應以 AA 等級以上設計，這就是為什麼招標文件幾乎都寫 AA。
要特別提醒的是版本問題。有業界文章指出，主管機關已於 115 年（2026 年）5 月發布新版規範，對標 WCAG 2.2、成功準則增至 87 項，AA 級新增包含「鍵盤焦點不被固定選單遮住」「可點擊目標至少 24×24 像素」等條文；也有資料仍以 110.07 版為準。兩種說法並存，代表這件事正在過渡期。實務上的安全做法是：動工前先到數位發展部無障礙網路空間服務網確認當下適用的版本與生效日，不要拿兩年前的檢核表直接沿用。
二、鍵盤走得完，網站才算及格
如果只能做一項檢查，就做這一項：把滑鼠移開，只用鍵盤的 Tab、Shift+Tab、Enter、空白鍵和方向鍵，從首頁走到詢問表單送出。這一關過不了，後面的條文大概也都過不了。
Photo by Christian Lue on Unsplash
常見的卡關點有這幾個：
焦點看不見。很多設計師嫌瀏覽器預設的藍色外框醜，在 CSS 裡寫了 outline: none 就收工。對只能用鍵盤的使用者來說，這等於把游標藏起來——他按了五次 Tab，完全不知道現在停在哪。正確做法是換掉樣式，而不是拿掉：用自訂的外框顏色或陰影取代，保持清楚可辨。
假按鈕。用 <div onclick="..."> 做出來的按鈕，視覺上看起來一樣，但 Tab 根本跳不到它，螢幕報讀軟體也不會說這是個按鈕。該用 <button> 和 <a> 的地方就用，需要時才用 role 與 tabindex 補救。
彈窗焦點逃逸。打開 Modal 之後，焦點應該被鎖在彈窗內，按 Esc 可以關閉，關閉後焦點回到原本觸發的按鈕。實務上十個彈窗有八個是 Tab 一直往後跑到背景頁面去，使用者再也找不到關閉鍵。
沒有跳過導覽連結。如果選單有二十個項目，每一頁都要按二十次 Tab 才到主內容。規範要求提供「跳至主內容」的捷徑連結，放在頁面最前面、平常視覺上隱藏、被鍵盤聚焦時才顯示。
另外一個越來越常見的問題是黏性導覽列。頁面往下捲動時，用鍵盤聚焦到的元素可能剛好被固定在頂端的選單蓋住，看起來像焦點消失了。這正是新版準則特別把它列出來的原因。
三、看得見，也要讀得懂
第二組最容易失分的是色彩與文字。AA 等級對對比度有明確數字：一般文字與背景的對比至少 4.5:1，大型文字（約 18pt 以上，或 14pt 粗體）至少 3:1。很多品牌官網喜歡的淺灰色小字配白底，實測大概只有 2.8:1，直接出局。這一項用免費的對比度檢測工具輸入兩個色碼就能算出來，是最快能自行修掉的錯誤。
Photo by Christian Chomiak on Unsplash
另一個常被忽略的是不能只用顏色傳達資訊。表單欄位填錯時把邊框變紅色、庫存狀態用綠點紅點表示、圖表用六種顏色分系列——對色覺辨識障礙的使用者（男性約每十二人就有一位）這些訊息等於不存在。解法不難：紅框旁邊加一行文字說明錯在哪，綠點旁邊寫「現貨」，圖表除了顏色再加上線條樣式或直接標註數值。
還有兩項值得順手檢查：頁面放大到 200% 時版面不應該破版或出現橫向捲軸；文字不要做成圖片（把電話、地址做成 banner 圖，報讀軟體念不出來，Google 也讀不到）。
四、圖片、表單與標題階層
這三項是檢測工具最容易抓出一大串錯誤的地方，但也最機械、最好修。
圖片替代文字（alt）。原則是「描述這張圖在這裡的功能」，不是描述畫面。產品照寫「不鏽鋼真空保溫瓶 500ml 霧面黑」，不要寫「產品圖」或「IMG_2043」。純裝飾用的背景圖、分隔線，應該寫成 alt=""（空值），讓報讀軟體直接略過，而不是省略 alt 屬性——兩者在檢測上意義完全不同。
表單標籤。每個輸入欄位都要有對應的 <label>，而且 for 要指到正確的 id。只靠 placeholder 當提示是不合格的：使用者一開始打字，提示就消失了，而報讀軟體念到這個欄位時可能只說「編輯方塊」。必填欄位要用文字標明，不能只靠一顆紅色星號。送出失敗時，錯誤訊息要具體（「統一編號應為 8 碼數字」優於「格式錯誤」），而且要讓焦點自動移到第一個錯誤欄位。
標題階層。每頁只有一個 <h1>，往下 h2、h3 依序使用，不要為了字體大小跳著用。報讀軟體的使用者有很高比例是靠「列出所有標題」來快速瀏覽頁面，階層亂掉等於目錄亂掉。這件事順便也會改善 SEO，因為搜尋引擎同樣靠標題理解內容結構。
還有一個容易漏掉的小項：<html lang="zh-Hant-TW">。少了語言標記，報讀軟體可能用英文發音去念中文內容。一行字的事，但檢測一定會抓。
五、檢測與標章：流程與現實
申請標章的標準路徑大致是：先用官方提供的單機版檢測工具 Freego 跑過全站，修到沒有錯誤後進行人工複檢，再到無障礙網路空間服務網註冊會員、上傳檢測報告與申請資料，通過後核發標章。標章有效期三年，期滿需重新檢測；核發後也可能接受不定期人工抽測。
這裡有三個現實面的提醒。
第一，自動檢測通過不等於無障礙。Freego 或 Lighthouse 能抓的大多是語法層級的問題——缺 alt、缺 label、對比不足。但「alt 寫得對不對」「Tab 順序合不合邏輯」「錯誤訊息講不講得清楚」這些只有人能判斷。業界的共識是自動工具大約只能覆蓋三到四成的準則，剩下的靠人工用鍵盤與報讀軟體實測。
第二，動態內容是最大的灰色地帶。購物車數量更新、Ajax 載入的搜尋結果、無限捲動的列表，畫面變了但報讀軟體沒被通知，使用者完全不知道發生什麼事。這類要靠 ARIA 的 live region 處理，是整份規範裡最吃技術功力的部分，也是最常在人工複檢被退件的地方。
第三，時程要抓得比想像中長。如果官網是三、五年前的舊版型，很多問題不是改 CSS 能解決的，而是 HTML 結構本身就沒有語意——整頁都用 div 堆出來，沒有 header、nav、main、footer。這種情況下，與其在舊站上一條一條補，不如趁改版時把無障礙寫進需求規格，從模板階段就做對，成本反而低很多。實務上建議在投標或改版上線前至少預留三個月。
結語：先做這三件事
如果你現在就想知道自家官網的狀況，不必等廠商報價，今天就能做三件事：
一、拔掉滑鼠走一遍。從首頁用 Tab 走到表單送出，記下每一個「焦點看不見」或「跳不到」的位置。這份清單就是你跟廠商談的依據。
二、量一下文字對比度。把官網主要的文字色與背景色丟進免費的對比度工具，低於 4.5:1 的通通列出來。通常改幾個色碼就能解決一大半錯誤。
三、確認規範版本。若有標案或標章需求，直接到數位發展部無障礙網路空間服務網查當下適用的規範版本與申請流程，再據以編列預算與時程。
無障礙這件事的投資報酬其實比多數人以為的好：它同時滿足了標案門檻、高齡使用者的實際需求，以及搜尋引擎對語意結構的偏好。更重要的是，它逼著團隊把一直以來含糊帶過的 HTML 結構、表單文案、錯誤處理重新整理一次——而這些東西修好之後，受惠的是每一個訪客。