讓網站好讀又好操作 · 第 02 章
不用滑鼠，也能完成操作
用 Tab、Enter、空白鍵與 Esc 走過導覽、對話框和表單，檢查焦點可見與操作順序。
貓老闆的簡報
把滑鼠放旁邊。你還能找到表單、開關選單，再回到原來的位置嗎？
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
修正鍵盤無法到達、焦點看不見與跳轉順序混亂的問題。
動手做
- 從頁首開始按 Tab，記錄每次焦點位置，檢查順序是否符合閱讀方向。
- 讓連結、按鈕及表單使用合適的原生元素，保留清楚的焦點外框；不要只給滑鼠移入時的樣式。
- 若有對話框，開啟後焦點進入框內，Tab 留在框內；Esc 可關閉並把焦點還給觸發按鈕，關閉後背景可再次操作。
- 檢查跳到主要內容連結；以鍵盤完成一次候補表單，不用只在畫面上模擬焦點。
親手試試
鍵盤操作實查
0 / 4
這是驗收紀錄練習；勾選不會自動執行檢查，也不代表你的專案已通過。
這樣對 AI 說
中文就可以
請陪我用鍵盤檢查頁首到候補表單的完整流程，記錄 Tab 順序與焦點可見性。按鈕、連結優先用原生元素。若有對話框，檢查開啟焦點、框內循環、Esc 關閉與焦點返回；避免焦點卡死。先列問題，再限定修改範圍，完成後重走鍵盤流程。
本章驗收清單
請在自己的練習專案實際操作，再依結果逐項確認。
- 所有重要操作可用鍵盤完成
- 焦點位置清楚且順序合理
- 對話框可關閉並返回觸發位置
- 跳到主要內容連結可使用
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。