WCAG 2.4.3: フォーカス順序
キーボードのTabキーで移動するフォーカス順序が、画面のレイアウト、論理的な意味順、操作の自然な流れと一致し、利用者が次にどの要素へ進むかを自然に予測できるようにします。
意図的な失敗例: フォーカス順が意味順と違う
tabindexで視覚順と異なる順序にしています。
確認観点
- HTMLソースコード内の記述順(DOM順)を、自然な読み上げ順・操作順にそろえる
- tabindex="1" などの正の整数値は使用せず、DOM順による自然なフォーカス移動を活用する
- CSSの flex order や絶対配置で見た目だけ順序を入れ替えてフォーカスが飛ぶ現象を防ぐ
人の判断が必要な例
- Tabキーで順次移動した際に、画面上の予期しない位置へ視線が飛ばされず、スムーズに移動できるか確認する
補助ツール候補
- focus-order
- tabindex
生成メモ
- 支援技術を用いた実検証が必要