Level AWCAG 2.2
2.4.3 フォーカス順序
フォーカス可能なコンポーネントのフォーカス順序が意味や操作性を保つ。
なぜ重要か
キーボードユーザー
フォーカスが予測不能に飛ぶと、現在位置を見失い操作が困難になる。
スクリーンリーダー
音声だけで操作するユーザーにとって、論理的な順序は「地図」そのもの。
認知障害
予測可能な動作はすべてのユーザーの認知負荷を減らし、操作ミスを防ぐ。
運動障害
フォーカスが飛ぶと、戻るための追加操作が必要。限られた動きで効率的に操作したい。
ライブデモ
フォーカス移動順序
Tab キーで移動して、フォーカスの順序を確認しましょう。
1
2
3
4
Tab順序:
メール→送信→名前→電話番号 視覚的順序と不一致
tabindex に正の値（1以上）を設定するとフォーカス順序が乱れます。 DOM順序を視覚的な順序に合わせることで、自然なフォーカス移動を実現しましょう。ペルソナで理解する
佐々木さん（38歳）— 弱視・キーボード操作
画面拡大ソフトで一部だけ見ています。Tabでフォーカスが画面外に飛ぶと、拡大領域を大きく移動させる必要があり、どこにいるか見失います。