論理的なタブ順序は、ユーザーがスムーズなキーボード エクスペリエンスを実現するうえで重要です。スクリーン リーダーなどの支援技術は、DOM 順にページを移動します。 情報の流れは理にかなっている必要があります。
手動テストの方法
アプリケーションのタブ順序が論理的かどうかを確認するには、ページをタブで移動してみてください。通常、フォーカスはページの上から下に向かって読み取り順に移動します。ほとんどの言語では、読む順番は左から右へ向かっています。アラビア語やヘブライ語などでは、読む順番が右から左に移動する言語もあります。
タブの順序を評価する際は、主に次の 2 つの点に留意します。
- DOM の要素は論理的な順序で配置されていますか。
- 画面外コンテンツはナビゲーションから正しく非表示になっていますか？
ナビゲーションのジャンプが、不快に感じます。 また、画面外でのジャンプ（タブで意図しないコンテンツに移動する）にも注意してください。
詳しくは、キーボード アクセスの基本をご覧ください。
修正方法
フォーカス順序が正しくないと思われる場合は、DOM 内の要素を並べ替えて、タブオーダーをより自然にします。
CSS を使用して要素の視覚的な再配置は避けてください。支援技術を利用するユーザーが無意味なナビゲーションをする可能性があるためです。CSS を使用する代わりに、要素を DOM 内の以前の位置に移動します。
画面外のコンテンツにキーボード コントロールでアクセスできる場合は、tabindex="-1" を使用して削除することを検討してください。
詳しくは、tabindex を使用してフォーカスを制御するをご覧ください。