アクセシビリティ資料 検査項目事例集 WCAG 2.4.3

WCAG 2.4.3: フォーカス順序

キーボードのTabキーで移動するフォーカス順序が、画面のレイアウト、論理的な意味順、操作の自然な流れと一致し、利用者が次にどの要素へ進むかを自然に予測できるようにします。

Level A 確認方法: 手動確認

意図的な失敗例: フォーカス順が意味順と違う

tabindexで視覚順と異なる順序にしています。

確認観点

  • HTMLソースコード内の記述順(DOM順)を、自然な読み上げ順・操作順にそろえる
  • tabindex="1" などの正の整数値は使用せず、DOM順による自然なフォーカス移動を活用する
  • CSSの flex order や絶対配置で見た目だけ順序を入れ替えてフォーカスが飛ぶ現象を防ぐ

人の判断が必要な例

  • Tabキーで順次移動した際に、画面上の予期しない位置へ視線が飛ばされず、スムーズに移動できるか確認する

補助ツール候補

  • focus-order
  • tabindex

生成メモ

  • 支援技術を用いた実検証が必要