意味と操作名から確認する
メニューを開く要素は明確な名前と展開状態を持つbuttonにします。アイコンだけでは支援技術が目的と現在状態を理解できません。
現在ページにはaria-currentを使い、非表示のPC版とモバイル版リンクが同時にTab順へ残らないようにします。
キーボードだけで移動する
Tab順、見えるフォーカス、EnterまたはSpaceでの操作を確認します。ドロワーを開いた後は適切な場所へフォーカスし、閉じた後はトリガーへ戻します。
- Escapeで閉じる
- 背景へフォーカスが移動しない
- スキップリンクで本文へ移動できる
- hoverなしでサブメニューを操作できる
タップ領域と画面端を確認する
見た目のアイコンが小さくても、操作領域には十分な広さと間隔が必要です。画面端、安全領域、片手操作で誤タップしやすい位置を確認します。
200%と400%ズームで再テスト
ズームによりPCページがモバイルブレークポイントへ変わることがあります。ブランド、言語、ログイン、主要CTAが衝突せず、メニューを探すために縦横両方のスクロールが不要か確認します。
長い翻訳や文字拡大では、文字を小さくせずヘッダーが高くなる設計を許容します。
スクロール、履歴、ルート変更
固定ヘッダーがアンカー見出しを隠さないか確認します。メニューを開いたまま戻る、言語切替、別ページ移動を行い、スクロール固定やオーバーレイが残らないようにします。