不是等到出問題才補救，而是提早在開發階段「感受」與「理解」可能的障礙
在開發網站時，我們總習慣寫完程式碼後再補測試，再補無障礙，再補設計稿上的細節。
但「無障礙設計」這件事，其實不只是檢查通過，而是讓人真的可以用得順、看得懂、操作得了。
這就是我設計 Accesserty DevCheck 的初衷：
讓開發者在開發階段，就能模擬真實世界中遇到的可及性挑戰，並結合機器工具進行基本檢測。
🎯 為什麼需要模擬？
無障礙問題，有些可以用程式碼掃出來，例如：
- 圖片缺少 alt
- 標題結構錯誤
- Landmark 缺少 main/nav/footer
- 沒有設定 aria 屬性或設錯
但更多的問題，其實是無法自動抓出來的：
- 你怎麼知道配色對色盲者來說是不是一樣？
- 你怎麼知道頁面文字模糊時還能不能閱讀？
- 你怎麼知道某個區塊如果看不見，會影響理解整體內容？
這些情境都無法靠 Lighthouse、axe-core 完全處理。
所以我們需要的是：模擬情境 + 偵測工具。
🧪 Accesserty DevCheck 提供了什麼功能？
✅ 模擬情境（Simulation Modes）
這些功能可以讓你在任何網站中，快速切換視覺環境來體驗他人可能遇到的困難：
- 色盲模擬：支援多種色盲類型（紅綠色盲、藍黃色盲、全色盲等）
- 視覺模糊模擬：
- 近視（整體模糊）
- 老花／遠視（只有中央清晰）
- 白內障（亮光擴散模糊）
- 視覺遮蔽模擬：模擬眼前有一塊區域是看不到的情況（常見於眼疾或視野限制者）
- 大文字／間距模擬：模擬放大字體時排版是否崩壞
- 顏色反轉模式：模擬強制暗色模式對 UI 的影響
- 單指點擊區模擬：讓你了解手指點擊範圍過小是否會導致誤觸（特別適合行動裝置開發者）
🔍 偵測功能（Debug Tools）
- axe-core 自動偵測：整合 DevTools 的無障礙檢測規則
- （開發中）圖片 alt 分析、Heading 結構視覺化、Landmark 區塊、SEO metadata 檢查、aria 屬性誤用提醒
💡 使用方式簡單直覺
DevCheck 是一個 Chrome Extension，只要安裝後點擊圖示，就能開啟模擬選單。
你可以即時切換不同情境、看到畫面變化，並點擊一鍵啟動偵測。
不用換頁、不用複製網址，不論是開發者測試 staging 站、還是設計師審查 prototype，都能即時驗證。
💬 它不只是給工程師的工具
- 設計師可以用來檢查配色與字級
- 專案經理可以在 Demo 前模擬各種情境
- 測試人員可以用來快速重現視覺問題
- 客服也能在用戶報案後馬上模擬狀況
🎯 為什麼這很重要？
因為「有問題」不代表「會回報」，也不代表「知道怎麼回報」。
你可以等到用戶投訴，再來修修補補，或是在開發階段就先體驗一次他們的痛苦。
如果體驗一次你就覺得難用，那真正需要這個功能的人，可能早就放棄這個網站了。
🚀 試試看 Accesserty DevCheck
https://chromewebstore.google.com/detail/accesserty-devcheck/ompbhahmipenipgiiiehbkiibkonoeec
你不需要學會所有 WCAG 條文，也不需要改變整個流程，
只要在開發中，點一下模擬，就能早一步降低後期修正的成本。
