WCAG 2.4.3: フォーカス順序が意味と視覚に沿っているか確認する
キーボードで移動するフォーカス順序が、ページの構造、視覚的な配置、操作の流れに沿った予測可能な順序になっているか確認します。
意図的な失敗例: フォーカス順が意味順と違う
tabindexで視覚順と異なる順序にしています。
確認観点
- TabキーとShift+Tabキーでページ全体を移動し、フォーカス順序を確認する
- フォーカス順序が見た目の順序、読み上げ順、操作の意味の流れと大きくずれていないか確認する
- モーダル、メニュー、アコーディオン、タブ、カルーセルなど開閉や状態変化があるUIで順序が自然か確認する
- CSSやJavaScriptで予測しにくいフォーカス順になっていないか確認する
人の判断が必要な例
- フォーカスが突然離れた場所へ飛ぶ、戻る、同じ場所を繰り返すなどの不自然な動きがないか確認する
- 開いたモーダル内では関連する操作へ順に移動し、閉じた後は開く前の操作対象付近へ戻るか確認する
- スマートフォン表示やレスポンシブ時にも、フォーカス順序が視覚順・意味順と一致しているか確認する
補助ツール候補
- focus-order
- tabindex
生成メモ
- 支援技術を用いた実検証が必要