先測語意與操作名稱
開啟選單的控制應是 button,並有清楚名稱及展開狀態。圖示本身不應是唯一提示;螢幕閱讀器需要知道這是主選單、目前是開啟還是關閉。
目前頁面可用 aria-current 標示。不要用無法聚焦的 div 模擬按鈕,也不要讓同一批桌面和手機連結在視覺隱藏後仍同時進入 Tab 順序。
用鍵盤完成整段導覽
從瀏覽器網址列開始按 Tab,確認焦點順序符合畫面邏輯、焦點指示清楚,而且 Enter 或 Space 能開啟按鈕。選單打開後應把焦點帶到合理位置,關閉後則返回觸發按鈕。
- Escape 可以關閉抽屜或子選單
- 焦點不會跑到被遮罩覆蓋的背景
- 略過導覽連結可直接到主內容
- 子選單不依賴滑鼠 hover 才能操作
檢查觸控目標與邊緣位置
手機上的圖示按鈕要有足夠可點範圍及間距。視覺圖示可以較小,但互動區域不應緊貼另一個操作。特別測試螢幕左右邊緣、瀏海安全區及單手使用時容易誤按的位置。
在 200% 和 400% 縮放下重測
放大後,桌面頁面可能進入手機斷點。確認品牌名稱、語言選單、登入和主要 CTA 不會互相擠壓,使用者亦不需同時水平和垂直捲動才能找選單。
文字放大或翻譯較長時,不要截斷關鍵操作名稱。必要時讓頁首增加高度,而不是把文字縮到難以閱讀。
測試捲動、返回及路由變化
固定頁首在錨點跳轉後不應遮住標題。開啟選單再按瀏覽器返回、切換語言或進入新路由,狀態都應合理重設;頁面不應保持鎖定捲動或留下透明遮罩。