佈景主題

原則二：無障礙與包容性 ​

公共服務必須對所有使用者可用。無障礙是基本品質要求，不是選配功能。

背景 ​

「大部分的人都可以正常使用」——這句話在商業產品裡或許說得過去，在政府服務裡不行。報稅、申請補助、查詢法規——這些不是可以不用的東西。當一個政府服務對某些人不可用，那些人不是「少數邊緣案例」，他們是被排除在外的公民。

台灣有超過 120 萬身心障礙者、近 400 萬 65 歲以上長者、數十萬新住民。加上暫時性的障礙（手受傷、強光下看手機、吵雜環境中操作），「有障礙的使用者」其實是每一個人。

原則 ​

無障礙不是做完之後加上去的一層。它是品質的底線。 一個元件如果鍵盤不能操作、螢幕報讀器讀不出來，那它就是還沒做完，不是「下一期再改善」。

技術標準是 WCAG 2.2 AA。但標準只是起點——真正的目標是讓各種狀態的人都能順利完成任務。

WCAG 2.2 四大原則 ​

可感知（Perceivable） ​

資訊必須以使用者能感知的方式呈現。

  • 圖片要有替代文字，不是塞一個 alt="image"
  • 不能只靠顏色傳達意義——紅色的錯誤訊息旁邊要有文字說明
  • 文字跟背景的對比至少 4.5:1（大字 3:1）
  • 影音要有字幕

可操作（Operable） ​

所有功能必須用鍵盤就能完成。

  • Tab 鍵能走完整個流程，而且順序合理
  • 焦點在哪裡永遠看得清楚
  • 點擊目標不能太小（至少 24×24px）
  • 有時間限制的操作要能暫停或延長

可理解（Understandable） ​

介面行為要可預期，內容要可理解。

  • 頁面語言有正確標示（lang="zh-TW"）
  • 表單欄位有 label，錯誤訊息說清楚哪裡錯、怎麼改
  • 導覽方式在整個服務裡前後一致
  • 不要在使用者沒預期時改變頁面內容

穩健（Robust） ​

內容在各種瀏覽器和輔助科技中都能正常運作。

  • 用語意化 HTML——<nav>、<main>、<button> 不是裝飾
  • 互動元件提供正確的 ARIA 角色與狀態
  • 實際用 VoiceOver 和 NVDA 測過，不是只跑自動化工具

開發流程整合 ​

  • 元件開發時就寫無障礙測試，不是上線前才補
  • CI 裡跑 axe-core，不過的不能合併
  • 定期邀請身心障礙者參與測試——自動化工具只能抓到約 30% 的問題

檢核標準 ​

  • axe-core 自動檢測零錯誤
  • 用鍵盤能完整操作所有流程
  • 至少在一種螢幕報讀器上測試過
  • 頁面放大到 200% 時版面不會壞掉
  • 色彩對比全部達標