讓網站好讀又好操作 · 第 01 章
把字放大，內容仍然好讀
檢查字級、對比、標題層級與手機版面，先讓重要內容能被看見與理解。
貓老闆的簡報
客人不用瞇眼才看得到價格，也不用左右拖畫面才讀完一句話。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
完成商品頁的閱讀改善與放大檢查。
動手做
- 從商品介紹、價格、按鈕與輔助文字找出難讀的位置，先記錄目前畫面。
- 用工具量測文字與背景對比，依適用標準調整；一般文字可先以 4.5:1、大字以 3:1 為檢查基準，不能只憑感覺判斷。
- 將瀏覽器文字與畫面放大到 200%，檢查內容、按鈕及表單是否被裁掉；一般文章內容在窄畫面不應需要來回橫向捲動。
- 用符合內容的標題層級組織段落，連結寫出目的地，價格限制等資訊不要只用顏色區分。
親手試試
示範：必填欄位只變紅，無法辨色或使用螢幕閱讀器的人不一定知道錯在哪裡。
示範：欄位旁同時顯示「請填寫收件地址」，不必只靠顏色猜意思。
這是資訊表達示範，不是對比量測工具。
這樣對 AI 說
中文就可以
請檢查貓掌櫃商品頁的文字閱讀與手機版面，先列出位置、現象及改善方法。量測文字對比並標明適用基準，檢查 200% 放大、窄畫面、標題層級和連結名稱。只修實際問題，價格與限制不能只靠顏色傳達。完成後提供前後畫面及實測結果，不宣稱全站已符合無障礙標準。
本章驗收清單
請在自己的練習專案實際操作，再依結果逐項確認。
- 一般文字對比有量測結果
- 200% 放大後仍可閱讀及操作
- 手機內文與操作不被截斷
- 標題與連結名稱能表達用途
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
官方參考資料
進度只存在這台瀏覽器，不上傳、不追蹤。