先測語意与操作名称
打开選单的控制应是 button,并有清楚名称及展開狀态。图示本身不应是唯一提示;屏幕閱读器需要知道这是主選单、目前是打开还是关闭。
目前页面可用 aria-current 标示。不要用无法聚焦的 div 模拟按钮,也不要让同一批桌面和手机链接在视觉隱藏后仍同时進入 Tab 順序。
用键盘完成整段导航
从浏览器网址列開始按 Tab,确认焦点順序符合画面逻辑、焦点指示清楚,而且 Enter 或 Space 能打开按钮。選单打開后应把焦点帶到合理位置,关闭后则返回触发按钮。
- Escape 可以关闭抽屜或子選单
- 焦点不會跑到被遮罩覆蓋的背景
- 略过导航链接可直接到主内容
- 子選单不依賴滑鼠 hover 才能操作
检查触控目标与边緣位置
手机上的图示按钮要有足夠可点範圍及间距。视觉图示可以较小,但互动区域不应緊貼另一个操作。特别测试屏幕左右边緣、瀏海安全区及单手使用时容易誤按的位置。
在 200% 和 400% 缩放下重測
放大后,桌面页面可能進入手机断点。确认品牌名称、語言選单、登入和主要 CTA 不會互相擠压,用户亦不需同时水平和垂直捲动才能找選单。
文字放大或翻譯较长时,不要截断關键操作名称。必要时让页首增加高度,而不是把文字缩到難以閱读。
测试捲动、返回及路由变化
固定页首在錨点跳转后不应遮住标题。打开選单再按浏览器返回、切換語言或進入新路由,狀态都应合理重設;页面不应保持鎖定捲动或留下透明遮罩。