投標前兩週，被三百項缺失卡住
去識別化案例：醫材公司投市府標案，規格書要求無障礙標章 AA。開標前兩週才交辦，Freego 檢測一跑三百多項缺失：產品圖沒替代文字、表單沒 label、客服浮動按鈕擋住鍵盤焦點。臨時改版 38 個工作天、NT$210,000，仍錯過投標。
誰現在該做，誰可以先等
該做
- 投政府或公立學校標案，規格書要求無障礙認證標章。
- 賣到歐盟：EAA 自 2025 年 6 月 28 日起管到電商服務。
- 客群含高齡或視障者：金融、保險、醫療、長照。
- 轉換靠表單完成：報名、掛號、詢價。
先等
- 三個月內要整站改版：跟新設計系統一起做。
- 功能仍大改的 MVP：先把關鍵任務路徑定下來。
- 預算只夠買一年覆蓋層：改做健檢更划算。
四條路的成本與取捨
| 做法 | 實際涵蓋 | 時間 | 首年成本 | 限制 |
|---|---|---|---|---|
| 覆蓋層小工具 | 原始碼未動 | 1 天 | NT$16,000–130,000／年 | 法遵不採認，使用者常關閉它 |
| 掃描後自己修 | 約三到四成問題 | 2–4 週 | 工時 NT$0–30,000 | 抓不到鍵盤陷阱 |
| 專業人工修補 | 可對到 WCAG 2.2 AA | 4–8 週 | NT$80,000–250,000 | 舊模板可能改不動 |
| 重構＋無障礙元件庫 | AA 且能長期維持 | 8–16 週 | NT$300,000 起 | 須同步改設計系統 |
甜蜜點在第三條；第四條要一年改版兩次以上才回本。
四階段導入流程
- 階段 0 基準檢測（3–5 天）：挑 15–25 個代表頁與三條關鍵路徑（找商品→加購物車→結帳→付款），跑 axe DevTools、Lighthouse、Freego。交付依 WCAG 2.2 條號分級的缺失清單。
- 階段 1 人工驗證（5–7 天）：只用 Tab／Enter／Esc 走完三條路徑，NVDA 搭 Chrome 抽測，逐一量對比度。交付 P0／P1／P2 清單與工時。
- 階段 2 修補與元件化（3–6 週）：先修對比度、缺替代文字、表單無 label、空連結與空按鈕，這四類占全網可偵測錯誤的 96%；再把 Modal、日期選擇器、輪播改成有焦點管理的元件。
- 階段 3 回歸與送件（1–2 週）：CI 接 axe-core 或 pa11y-ci，新違規直接擋 PR；標案再走 Freego 自評與標章申請。交付 CI 設定與聲明頁。
真實成本拆解
2026 年台灣行情：健檢報告 NT$25,000–60,000、人工修補 NT$80,000–250,000、重構含元件庫 NT$300,000 起。ScriptWalker「網站無障礙健檢與修補方案」健檢自 NT$35,000 起、修補自 NT$90,000 起、監測月費自 NT$2,500 起。常被漏算的：
- 替代文字：500 張商品圖約 17 小時，NT$12,000–25,000，得由懂商品的人寫。
- 影片字幕每分鐘 NT$40–120；PDF 型錄每頁 NT$150–400。
- 第三方元件替換：客服 widget、輪播、reCAPTCHA NT$20,000–60,000。
- 覆蓋層年費：accessWidget 依流量計價，最低約每月 59 美元。
客戶想像 vs 實際發生
- 想像：裝一段 JavaScript 就合規。實際：覆蓋層修不到原始碼，Overlay Fact Sheet 有數百位從業者連署反對；2025 上半年美國 456 件無障礙訴訟的被告網站本來就裝了 widget。
- 想像：這是視覺設計問題。實際：最高頻缺失是低對比文字 83.9%、缺替代文字 53.1%、表單無 label 51%，得動前端與內容流程。
- 想像：ARIA 加越多越無障礙。實際：WebAIM Million 2026 顯示用 ARIA 的頁面平均 59.1 個錯誤，沒用的只有 42 個；首頁元素數一年還增加 22.5%。
六個常踩的坑與解法
- 只修首頁不修結帳。解法：以關鍵任務路徑為驗收單位，任一步驟不通就整條不算。
- 用 div 加 onclick 做按鈕。解法：原生 button、a、label 能用就別用 ARIA 模擬。
- 替代文字寫成檔名。解法：功能性圖片寫用途、裝飾性用空 alt，設為後台必填。
- 第三方元件擋住鍵盤。解法：合約階段盤點客服 widget、金流 iframe、驗證碼，要供應商出聲明。
- 中文字做成圖片、html 沒宣告語言。解法：改用網頁文字加 CSS 並補上 lang="zh-Hant"，全球仍有 12.7% 首頁沒宣告。
- 修完沒有回歸機制。解法：CI 跑 axe-core、每月出掃描報表並寫進 PR 範本。
成功指標與 90 天路線圖
- 第 30 天：基準檢測完成，P0 清零（鍵盤走不完的流程、無 label 表單、缺替代文字的功能圖），首頁與結帳頁 axe 嚴重項目為零。
- 第 60 天：全站對比度達 AA，三條關鍵路徑可純鍵盤完成，NVDA 走得完結帳，CI 擋新違規。
- 第 90 天：代表頁通過 WCAG 2.2 AA 自評，Freego 通過並送件，每月回歸報表運作。
決策清單
- ☐ 知道要對到 A 還是 AA
- ☐ 列得出三條關鍵任務路徑
- ☐ 有人只用鍵盤走完結帳流程
- ☐ 有人用報讀器實測過一條路徑
- ☐ html 有正確的 lang 屬性
- ☐ 表單欄位都有可辨識的 label
- ☐ 功能性圖片有替代文字，裝飾性用空 alt
- ☐ 文字對比度達 4.5:1（大字 3:1）
- ☐ 每個元件的鍵盤焦點都看得見
- ☐ 客服 widget、驗證碼、金流頁測過鍵盤
- ☐ 影片有字幕，PDF 有可選取文字層
- ☐ CI 或每月排程會自動掃描並通知
- ☐ 站上有公開的無障礙聲明
勾不到 8 項，現在送檢多半會退件。
常見問題 FAQ
裝覆蓋層工具列算合規嗎？
不算。覆蓋層只在瀏覽器端疊一層，原始碼問題還在，報讀器使用者常得先關掉它。台灣標章檢測看原始碼與結構，覆蓋層過不了 Freego，只能當暫時緩解。
Lighthouse 100 分是不是就過了？
不是。自動化只涵蓋約三到四成條款。最低限度的人工驗證是鍵盤走完三條關鍵路徑、用 NVDA 抽測結帳、逐一量對比度，合計約 4–8 小時。
一定要申請無障礙標章嗎？
看客戶是誰。機關與公立學校依數位發展部規範有申請義務，標案通常寫明等級；民間企業沒有強制，但賣給政府或受 EAA 規範時，標章是最省事的證明。
下一步
不確定離 AA 還有多遠，先不用談報價。我們可以做一次 60 分鐘健檢：自動化掃描、鍵盤走查、一條路徑的報讀器測試，交付依 WCAG 2.2 分級的缺失清單與分級報價。
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p