2026/06/22 更新：已新增 AI 圖片 alt 語意輔助辨識與建議，以下為原文不修正。

--

在開發網站時，我們總習慣寫完程式碼後再補測試，再補無障礙，再補設計稿上的細節。

但「無障礙設計」這件事，其實不只是檢查通過，而是讓人真的可以用得順、看得懂、操作得了。

這就是我設計 Accesserty DevCheck 的初衷：

讓開發者在開發階段，就能模擬真實世界中遇到的可及性挑戰，並結合機器工具進行基本檢測。

為什麼需要模擬？

無障礙問題，有些可以用程式碼掃出來，例如：

  • 圖片缺少 alt
  • 標題結構錯誤
  • Landmark 缺少 main/nav/footer
  • 沒有設定 aria 屬性或設錯

但更多的問題，其實是無法自動抓出來的：

  • 你怎麼知道配色對色盲者來說是不是一樣？
  • 你怎麼知道頁面文字模糊時還能不能閱讀？
  • 你怎麼知道某個區塊如果看不見，會影響理解整體內容？
  • 這些情境都無法靠 Lighthouse、axe-core 完全處理。

所以我們需要的是：模擬情境 + 偵測工具。

Accesserty DevCheck 提供了什麼功能？

模擬情境（Simulation Modes）

這些功能可以讓你在任何網站中，快速切換視覺環境來體驗他人可能遇到的困難：

  • 色盲模擬：支援多種色盲類型（紅綠色盲、藍黃色盲、全色盲等）
  • 視覺模糊模擬：
    • 近視（整體模糊）
    • 老花／遠視（只有中央清晰）
    • 白內障（亮光擴散模糊）
    • 視覺遮蔽模擬：模擬眼前有一塊區域是看不到的情況（常見於眼疾或視野限制者）
    • 大文字／間距模擬：模擬放大字體時排版是否崩壞
    • 顏色反轉模式：模擬強制暗色模式對 UI 的影響
    • 單指點擊區模擬：讓你了解手指點擊範圍過小是否會導致誤觸（特別適合行動裝置開發者）

偵測功能（Debug Tools）

  • axe-core 自動偵測
  • PDF 結構偵測

使用方式簡單直覺

DevCheck 是一個 Chrome Extension，只要安裝後點擊圖示，就能開啟模擬選單。

你可以即時切換不同情境、看到畫面變化，並點擊一鍵啟動偵測。

不用換頁、不用複製網址，不論是開發者測試 staging 站、還是設計師審查 prototype，都能即時驗證。

它不只是給工程師的工具

  • 設計師可以用來檢查配色與字級
  • 專案經理可以在 Demo 前模擬各種情境
  • 測試人員可以用來快速重現視覺問題
  • 客服也能在用戶報案後馬上模擬狀況

為什麼這很重要？

因為「有問題」不代表「會回報」，也不代表「知道怎麼回報」。

你可以等到用戶投訴，再來修修補補，或是在開發階段就先體驗一次他們的痛苦。

如果體驗一次你就覺得難用，那真正需要這個功能的人，可能早就放棄這個網站了。

試試看 Accesserty DevCheck

你不需要學會所有 WCAG 條文，也不需要改變整個流程，

只要在開發中，點一下模擬，就能早一步降低後期修正的成本。