破冰故事：失明使用者卡在首頁的那一秒
有一個案例是這樣的，曾經在某次可用性測試，邀請一位全盲的測試人員體驗新開發的 App。結果他在登入頁旋轉 30 秒後說：「畫面只念『圖片、圖片、圖片』，我不知道要點哪裡。」那一刻，全場靜默。無障礙做不好，使用者就直接「消失」——這比任何指標都更有震撼力。
成功案例解析
案例 | 問題 → 解法 | 成效 |
iOS VoiceOver / Android TalkBack 示範 | • 問題：按鈕未標 aria-label，焦點順序錯亂。 | 朗讀流程縮短 40 %、完成任務時間 -30 % |
山林悠遊網（公部門網站） | • 問題：舊版僅通過 1.0 A 級；圖文版面在放大 200 % 時錯位。 | 2019 取標章後，年均旅遊諮詢量 +17 % |
金融業官網取得標章 | • 問題：表單驗證碼僅圖形。 | 完成交易率 +12 %，客服降低 CAPTCHA 申訴 68 % |
常見痛點 TOP 5
- 焦點迷失：Modal 開啟後焦點仍停在背景。
- 圖片無替代文字：alt 留空或只有檔名。
- 動態內容無提示：AJAX 更新時閱讀器毫無反應。
- 表單標籤不明確：只用 placeholder，導致朗讀「edit text」而非「電子郵件」。
- 通知無法被朗讀：Toast 缺 role=”alert”，使用者根本不知道成功或失敗。
工具箱：從「偵測」到「修復」一次打包
類別 | 工具 / 服務 | 場景 |
瀏覽器外掛 | WAVE、axe DevTools | 快速掃描靜態頁，抓 alt、對比、ARIA |
行動測試 | Android：Accessibility Scanner / TalkBack Menu | 實機檢查觸控手勢、朗讀順序 |
自動化 & CI | Lighthouse、Pa11y、Playwright + @axe-core | PR 或 nightly build 內部閘道，阻擋違規併入主幹 |
螢幕閱讀器 | NVDA（Windows）、JAWS、Orca（Linux） | 跨平台語音驗證，確保所有元件朗讀正常 |
設計 / 原型 | Stark、Figma a11y 插件 | 設計階段檢查色彩對比、焦點框 |
最新平台功能 | Apple iOS 26 App Store Accessibility Labels；Google Gemini × TalkBack AI 圖片敘述 | 提前熟悉原生新功能，減少自行開發成本 |
實戰流程 SOP（5 階段）
- 需求：與業主確認標章等級（通常 AA），把「焦點可見度」「可存取驗證」列入 Acceptance Criteria。
- 設計：Figma 元件庫內建對比5:1、最小點擊區 24 × 24 px。版型走向「單欄」以減低焦點跳躍。
- 開發：Web：Semantic HTML + ARIA；行動：contentDescription / accessibilityLabel。為 Drag & Drop 提供 space + arrow 替代手勢。
- 測試：自動—CI 每推送執行 axe 規則集，違規 >3 條 Fail Build。手動—雙平台螢幕閱讀器跑主流程；表單驗證碼全程鍵盤通過。
- 維運：夜間批次 Pa11y 爬全站，報表寄給 Slack。重大改版前預留 10 % 工時給無障礙回歸測試。
成功關鍵：把工具變成習慣
設計師：顏色對比插件開著再送稿。
前端：每次 `npm test` 自動跑 a11y linter。
PM/測試：驗收清單多一欄「VoiceOver/TalkBack 通過」。
只要連續兩個 Sprint，團隊就會自然把無障礙當成 Definition of Done。
人人可用，才算做到「公共性」
在政府標案或企業內專案，無障礙不再是「加分題」，而是「不做就等著被退件」。從案例可見，夠早導入就能把成本壓到最低，還能換來更大的受眾與 SEO 優勢。
下一步？打開你的專案，讓 WAVE 或 axe 跑一圈，看看第一眼冒出多少紅字；然後把工具裝進 CI，讓紅字只出現在開發端，再也別落到真實使用者身上。做到這一步，你的網站/App 就離「人人可用」不遠了。
