讓網站好讀又好操作 · 第 03 章
讓圖片和欄位說得清楚
圖片替代文字要傳達用途，欄位標籤要正確連結；錯誤訊息也要能被輔助工具辨識。
貓老闆的簡報
照片沒載出來，客人還是要知道我賣的是哪個碗。打完信箱，也要知道這一格是什麼。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
完成商品圖片、欄位標籤與表單錯誤的語意改善。
動手做
- 盤點圖片用途：商品圖補描述，純裝飾圖片用空替代文字；圖示按鈕另有可辨識名稱。
- 每格輸入都有標籤且正確連結，提示文字只放範例，不代替標籤。
- 必填與格式限制先說明，錯誤用文字指出具體原因，並將提示與欄位建立可供輔助工具理解的關係。
- 使用螢幕閱讀器檢查一張商品圖和兩個欄位，記錄實際聽到的名稱；若尚未使用工具，明確列為待驗證。
親手試試
只示範可見標籤與錯誤文字；不會傳送輸入，也不能代替完整的螢幕閱讀器驗收。
這樣對 AI 說
中文就可以
請盤點商品頁圖片用途與表單欄位，為有資訊的圖片寫繁體中文替代文字，裝飾圖保持空替代文字。欄位標籤必須正確連結輸入格，必填、輔助說明及錯誤訊息要能辨識。提供我用螢幕閱讀器檢查名稱與錯誤的步驟，沒實際聽過的結果不能填通過。
本章驗收清單
請在自己的練習專案實際操作，再依結果逐項確認。
- 資訊圖片有符合用途的替代文字
- 欄位標籤與輸入格正確連結
- 錯誤訊息具體且與欄位關聯
- 輔助工具的實測與待測範圍清楚
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
官方參考資料
進度只存在這台瀏覽器，不上傳、不追蹤。