上線之前・無障礙・免費
無障礙基本檢查
30 秒懂
無障礙是讓視障、色弱、年紀大的人也能順利使用你的網站。最基本的四件事：圖片有文字說明、字和背景的顏色分得清楚、標題有順序、表單的每一格都有名稱。做好這些，其實所有人都會覺得更好用。
直接用
填好欄位，提示詞會自動組好，按「複製提示詞」貼給你的 AI 工具。
組好的提示詞
我的網站是烘焙教室的官網，有課程介紹和報名表單，請幫我做無障礙的基本檢查和修正： 1. 圖片替代文字：有意義的圖片都要有簡短的文字說明，寫出圖片想傳達的內容；純裝飾的圖片設成空的替代文字，讓螢幕閱讀器略過。 2. 顏色對比：一般文字和背景的對比至少 4.5:1，大字至少 3:1。我們的配色是淺粉紅色的按鈕配白色的字，請特別檢查。也不要只靠顏色表達意思，例如錯誤訊息除了變紅色，也要有文字說明。 3. 標題順序：每頁只有一個最大標題（H1），下面依序用 H2、H3，不要為了字的大小跳層。 4. 表單標籤：每個輸入欄位都要有看得到的名稱，不能只靠欄位裡的灰色提示字。 先列出找到的問題，再一項一項改。外觀盡量不變，需要換顏色時先給我看建議的色碼。完成後列出改了哪些檔案、我要怎麼確認。
這是預覽版，正式上架前會用主流 AI 工具實際測試。提示詞裡不要放密碼或金鑰；需要金鑰的地方，請 AI 改用環境變數。AI 做出來的結果，請照下面的清單自己確認。
怎麼確認 AI 做對了
- 用 WAVE（wave.webaim.org）檢查每一頁，看紅色的錯誤有沒有清掉。
- 用 Chrome 的 Lighthouse 跑一次「無障礙」檢查，看分數和還沒通過的地方。
- 把手機調成灰階顯示（通常在協助工具的設定裡）看網站，確認按鈕和錯誤訊息還分得出來。
- 點一下表單欄位上面的名稱，游標應該會跳到那一格。
常見陷阱
- 替代文字寫成「圖片」「IMG_0012」，或是塞滿關鍵字。
- 淺灰色的字配白色背景，看起來很有質感，但很多人看不清楚。
- 為了讓字變大就亂用標題，或用粗體字假裝標題。
- 表單只用欄位裡的灰色提示字當名稱，一開始打字就不見了。
