政府網站無障礙檢測沒過,機關承辦人接到的通知往往只有一行字:「本網站未符合無障礙規範 AA 等級,請限期改善。」附件是一份幾百列的錯誤清單,每一列都是像「1.4.3 對比(最低)」這樣的代號。承辦人拿著這份清單去問廠商,廠商回一句「這要重做」,於是事情就卡在那裡。
問題其實不在難度,而在順序與範圍被搞錯了。無障礙不是一個要靠整站重做才能達成的目標,也不是買一個浮動工具列掛上去就會過的檢核項。它是一組可以逐條驗證的技術要求,其中八成以上的失分集中在少數幾個共用元件上——改對地方,一次可以修掉數百頁;改錯地方,改到天亮也只修好一頁。
這篇文章把三件事講清楚:AA 等級到底在要求什麼、自動檢測工具抓不到哪些項目、以及一份可以直接拿去排工的改善清單與工作量估法。如果是新建案或改版案,還會談要怎麼把這些要求寫進規格書與驗收條件,避免驗收當天才發現雙方認知不同。
AA 等級到底在要求什麼?先把三件事分清楚
討論開始之前,先把三個常被混在一起講的東西拆開。這三件事的主管單位、更新節奏與判定方式都不一樣,混著談就會出現「我們有標章啊,為什麼還說沒過」這種對話。
一、技術標準:WCAG 與國發會的網站無障礙規範
國際上的技術標準是 W3C 制定的 WCAG(網頁內容無障礙指引),台灣的政府網站則依國家發展委員會公告的網站無障礙規範辦理,該規範以 WCAG 為基礎轉化而成,檢測項目與代號大致對應。規範會隨 WCAG 版本演進而更新,動工前請先確認機關這一案適用的是哪一版,不要拿舊版清單去驗新版要求。
二、等級:A、AA、AAA 不是「越高越好」
A 是基本可用,AA 是政府網站的實務要求,AAA 是進階等級。要注意的是 WCAG 本身就說明不建議整站以 AAA 為目標,因為部分 AAA 條件(例如更嚴格的對比值、要求提供手語翻譯)在一般網站上並不現實。標案寫「須達 AAA 等級」不是把標準訂高,而是把驗收訂成一個做不到的條件。
三、標章:自主檢測宣告,且有使用期限
現行制度是機關自行完成檢測後線上申請、取得標章並宣告等級,不是由第三方逐頁審查發證。因此標章代表的是「申請當時的那個版本通過了」,並非永久有效——標章有使用期限,到期要重新檢測,網站改版或大量新增頁面後也應重測。實務上最常見的落差就發生在這裡:三年前拿的標章還掛在頁尾,網站早已改版兩次。
自動檢測全綠不等於過 AA:工具抓得到與抓不到的
國發會的無障礙網路空間服務網提供免費的自動檢測工具(Freego),瀏覽器端也有 Lighthouse、axe 這類開發者工具可以用。這些工具很有價值,但它們的能力範圍必須先講清楚:自動工具只能驗證可以用程式判斷的東西,判斷不了語意。
同一個 alt 屬性,工具眼中全都是通過
alt="圖片一"、alt="banner.jpg"、alt="市長於 9 月 1 日主持交通改善說明會現場"——這三種寫法在自動檢測工具眼中沒有差別,因為它只檢查 alt 屬性存不存在、是不是空字串。但對使用螢幕報讀軟體的民眾來說,前兩種等於沒有資訊。「零錯誤」的檢測報告是入場券,不是結案報告。
要補上工具的盲區,需要三項人工檢測。這三項不需要專業設備,承辦人自己花一個下午就能做完,而且抓到的問題往往比工具報告更關鍵:
三項自己就能做的人工檢測
- 鍵盤走一遍:拔掉滑鼠,只用 Tab、Shift+Tab、Enter、方向鍵,從首頁走到「線上申辦」或「意見信箱」送出。過程中要能隨時看得出焦點停在哪裡;如果焦點消失、順序亂跳、或某個下拉選單怎麼按都打不開,那一關就是失分點。
- 螢幕報讀軟體聽一遍:Windows 內建的「朗讀程式」或 NVDA 都可以。重點聽首頁與表單頁:連結唸出來是「更多」還是「更多-交通違規申訴須知」、必填欄位有沒有被唸出來、送出失敗時錯誤訊息會不會被讀到。
- 文字放大到 200%:瀏覽器按 Ctrl 加號放大到 200%,檢查有沒有破版、文字重疊、按鈕被推出畫面外或內容被裁掉而且捲不到。這是 AA 的明文要求,也是改版後最容易退步的一項。
十個最常失分的項目與具體改法
下面這張表是實務上重複出現頻率最高的十項。每一項都標出該怎麼判定——因為「知道要改」和「知道改到什麼程度算過」是兩件事,後者才是能不能結案的關鍵。
| 項目 | 常見錯法 | 具體改法與判定基準 |
|---|---|---|
| 1. 圖片替代文字 | alt 缺漏、填檔名、填「圖片」;純裝飾用的線條與底圖也硬填一段描述 | 有資訊的圖片寫出它要傳達的內容;純裝飾圖用 alt=""(空字串,不是省略)讓報讀軟體略過。判定:關掉圖片顯示後,頁面文字是否仍可理解。 |
| 2. 色彩對比 | 淺灰字配白底、彩色按鈕上的白字、圖片上直接壓文字 | 一般文字前景與背景對比至少 4.5:1;大型文字(約 18pt 以上,或 14pt 以上粗體)至少 3:1;按鈕邊框、表單框線等非文字元件至少 3:1。判定:用對比檢測工具逐色量測,不要靠肉眼。 |
| 3. 只用顏色傳達資訊 | 「紅色為必填」、「綠色代表已核准」、圖表只靠顏色區分數列 | 顏色之外要再加一種辨識方式:星號、文字標示、圖案、線條樣式。判定:把畫面轉成灰階,資訊是否仍完整。 |
| 4. 鍵盤操作與焦點可見 | 為了美觀寫了 outline:none;下拉選單、燈箱、日期選擇器只吃滑鼠事件 |
所有可操作元件都要能用鍵盤到達與觸發,且焦點狀態要看得見(自訂樣式可以,但不能沒有)。彈出視窗開啟時焦點要移進去、關閉後要回到觸發按鈕。判定:拔滑鼠實測。 |
| 5. 跳至主要內容 | 沒有跳離連結,鍵盤使用者每一頁都要按幾十次 Tab 才穿過導覽列 | 在頁面最前端放「跳到主要內容」連結,指向主內容區的 id。可以視覺上隱藏,但取得焦點時必須顯示出來。判定:進站後按第一次 Tab,該連結要出現。 |
| 6. 標題階層 | 整頁沒有 h1;用 h3 只因為字比較小;把標題做成圖片 | 每頁一個 h1,層級依序不跳級(h2 之下才是 h3),標題要真的描述下方內容。判定:用瀏覽器外掛列出標題大綱,看得出頁面結構才算過。 |
| 7. 表單標籤與錯誤訊息 | 用 placeholder 當標籤、標籤與欄位沒有 for 對應、錯誤只用紅框表示 | 每個欄位配 <label for>;必填要用文字說明;錯誤訊息要指出哪一欄、錯在哪、怎麼修正,並讓報讀軟體能讀到。判定:送出一次空白表單,聽錯誤訊息。 |
| 8. 資料表格 | 用表格排版;有表格但標題列是 td 加粗體;跨欄跨列沒有標示 | 資料表格的標題儲存格用 <th> 並加 scope,複雜表格加 caption 說明。排版請用 CSS,不要用表格。 |
| 9. 語言標示與連結文字 | <html> 沒有 lang 或寫成 en;滿頁「更多」「請點此」「詳全文」 |
中文頁面標 lang="zh-Hant",頁內外文段落另標語言。連結文字要能單獨看懂目的地,或用可及的方式補充完整敘述。判定:把所有連結文字抽出來成一張清單,是否分得出誰是誰。 |
| 10. 影音與自動輪播 | 宣導影片沒有字幕;首頁大圖自動輪播且無法暫停;進站自動播放音樂 | 預錄影片要有字幕(自動生成的字幕須人工校正);超過 5 秒的自動移動、閃爍或捲動內容要提供暫停、停止或隱藏的方式;自動播放的聲音要能關閉。 |
三個最容易被整批忽略的地方
- PDF 公文與表單附件:掃描件本質上就是一張圖片,報讀軟體讀不出任何內容。政府網站的下載專區常常是失分重災區,卻因為自動檢測工具多半只掃 HTML 而完全沒被列進報告。改法是同時提供可讀的 HTML 或 ODF/Word 版本,新製文件一律從文字檔輸出而非掃描。
- iframe 與嵌入元件:嵌入的地圖、影片、統計儀表板要加
title說明用途;第三方元件本身不合規時,要另外提供等效的替代內容。 - 浮動無障礙工具列:市面上有一類外掛,掛上去就在畫面角落生出「放大字級/高對比/灰階」按鈕。它可以是輔助,但不能取代原始碼修正——底層的 alt、label、標題階層、鍵盤操作沒改,檢測一樣不會過,而且這類外掛有時反而會干擾使用者自己慣用的輔助工具。
寫進標案還是自己改?規格書與驗收條件的寫法
如果無障礙改善要靠採購完成,那麼規格書寫得夠不夠具體,直接決定驗收會不會吵起來。只寫一句「網站須符合無障礙規範 AA 等級」是最常見、也最容易出事的寫法——它沒有界定範圍、方法與佐證,廠商交一張工具截圖也算交差。
無障礙條款至少要寫進去的五件事
- 適用版本與等級:寫明依據哪一版網站無障礙規範、達到哪一等級,不要只寫「符合最新規範」。
- 檢測範圍:是全站所有頁面,還是各類型代表頁加上動態產生的樣板?線上申辦流程、搜尋結果頁、錯誤頁要不要納入?沒寫清楚,廠商會用最小範圍解釋。
- 檢測方式:明訂為「自動檢測 + 人工檢測」,並列出人工項目(鍵盤操作、螢幕報讀、200% 放大),否則廠商只會跑工具。
- 佐證文件:要求交付自動檢測報告、人工檢測紀錄(含操作步驟與結果)、以及缺失改善對照表,而不是一張通過畫面的截圖。
- 維護期責任:寫明維護期間新增或修改的頁面、樣板同樣須符合,並約定改版後重新檢測的時機。缺這一條,網站上線半年就會退回原狀。
這幾條的寫法邏輯,與規格書上其他技術條款其實一致:用可量測的指標與可查驗的佐證取代形容詞。怎麼把要求寫得既篩得掉不合格廠商、又不會被質疑綁標,我們在科技執法標案規格書怎麼寫裡有完整的條文寫法與檢查清單,無障礙條款可以直接套同一套結構。若這一案是整包的資訊系統採購,評選階段該怎麼配分、哪些項目應該獨立列表,則可參考智慧警政採購指南的評選標準設計。
改善順序與工作量怎麼估
回到最開始那份幾百列的錯誤清單。它讓人絕望的原因是它按「頁面」排列,於是看起來有幾百個問題。但如果按「元件」重新分組,通常會塌縮成十幾個——因為導覽列在每一頁都出現,它的一個錯誤就會在報告裡出現幾百次。
三批推進,由共用到個別
- 第一批:共用區與樣板層。導覽列、頁尾、麵包屑、搜尋框、分頁元件、表單元件、彈出視窗。這一層改一次,全站同步受益,是投入產出比最高的部分,也是能讓錯誤總數快速下降的地方。
- 第二批:各類型代表頁。首頁、列表頁、內容頁、表單/申辦頁、搜尋結果頁、檔案下載頁,六到八頁就能覆蓋大多數政府網站的頁型。每一種頁型修好,同型的其餘頁面多半跟著修好。
- 第三批:個別內容與附件。圖片替代文字、影片字幕、PDF 附件。這一層數量最大、單項最簡單,但不會有做完的一天——只要還在上稿,就會持續產生新的缺失。
工作量的估法也跟著這個結構走:不要用總頁數估,要用樣板數量估。先跑一次全站自動檢測,把錯誤按元件而非按頁面分組,得到樣板層的實際問題數;再人工實測六到八個代表頁,補上工具抓不到的鍵盤與語意問題。兩者相加才是第一、二批的真實範圍。至於第三批,該估的不是工時,而是治理機制:上稿介面要把替代文字設成必填、後台要擋掉沒有文字層的 PDF、每季抽查一次新增頁面。沒有這一層機制,前兩批做得再漂亮,三個月後檢測還是會退回去。
還有一個時機判斷:如果網站本身已經是十幾年前的舊架構,還沒有響應式設計、程式碼裡混著表格排版與行內樣式,那麼把無障礙改善併進改版一起做,通常比在舊架構上逐條補丁划算。判斷該修還是該重做的四個依據(原始碼可取得性、資料庫結構、是否只差 RWD、後台邏輯),我們整理在老網站升級還是重做這一篇,可以先用它把方向定下來再談無障礙的排程。
瑪尼國際深耕資訊服務 20 年、服務逾 500 家企業(含董氏基金會、85度C),並以協力廠商身分參與全台多個縣市警察局交通隊的入案系統建置與維運。機關若要把無障礙需求寫進標案、盤點既有網站的樣板層問題,或估算改善範圍與時程,我們可以依實際站況提供技術說明。從網頁設計、程式改寫到後端網站代管都在同一個技術體系內完成,缺失才不會在交接時卡在「這是設計端還是主機端的問題」;這也是一條龍服務對機關最實際的價值。若同一案還包含執法系統或成效公開專區,可一併參考科技執法系統方案頁。
常見問題
Q:政府網站無障礙 AA 等級是法規強制的嗎?沒有通過會有什麼後果?
對各級政府機關的網站而言,無障礙不是加分項目而是基本要求,法源精神來自身心障礙者權益保障法對資訊平等近用的規定,實際的技術標準則由國家發展委員會公告的網站無障礙規範訂定,並以 W3C 的 WCAG 為基礎。等級分為 A、AA、AAA 三級,政府網站實務上要求的是 AA,AAA 並不建議整站一律套用。沒有通過的直接後果通常不是罰鍰,而是三件事:一是列入機關網站考核或年度評核的缺失項目,二是民眾或身心障礙團體陳情後必須限期改善,三是新建與改版標案在驗收階段被退回。另外要注意標章不等於永久合規,現行制度是機關自主檢測後線上申請宣告,標章有使用期限,到期要重新檢測;網站改版或大量新增頁面之後,也應該重新檢測一次。
Q:政府網站無障礙用 Freego 之類的工具自動檢測全部通過,就等於符合 AA 等級了嗎?
不等於。自動檢測工具只能驗證可以用程式判斷的部分,例如圖片有沒有 alt 屬性、表單欄位有沒有對應的 label、頁面有沒有標題標籤、前景與背景的色彩對比數值夠不夠。它沒有辦法判斷語意對不對——替代文字寫成「圖片一」或「banner.jpg」,在工具眼中一樣是通過;鍵盤焦點的移動順序合不合理、錯誤訊息有沒有講清楚要怎麼修正、影片字幕的內容正不正確,也都要人工操作才看得出來。務實的做法是把自動檢測的零錯誤當成入場券而不是結案報告,再補上三項人工檢測:拔掉滑鼠只用鍵盤把主要流程走一遍、用螢幕報讀軟體聽過首頁與表單頁、把瀏覽器文字放大到 200% 看有沒有破版或內容被裁掉。實際適用的規範版本與檢測工具版本,請以國發會無障礙網路空間服務網的公告為準。
Q:既有的政府網站無障礙改善該從哪裡開始?大概要花多少時間?
先改共用區,不要從內容頁一頁一頁改。網站的導覽列、頁尾、麵包屑、搜尋框與表單元件會出現在每一頁,這些屬於樣板層,改一次等於同時修好數百頁,投入產出比遠高於逐頁補圖片替代文字。建議的順序是共用區與樣板層、再來是各類型的代表頁(首頁、列表頁、內容頁、表單頁、搜尋結果頁、檔案下載頁),最後才是個別內容與附件檔。時間的估法不要用總頁數,要用樣板數量:先自動掃一次全站取得問題分布,再人工實測六到八個代表頁,就能推估樣板層的實際工作量。內容層的圖片替代文字與 PDF 附件則不是一次性專案,而是長期治理問題,必須把檢查點放進上稿流程,否則改完三個月又會退回原狀。