論理的なタブオーダーを実装することは、ユーザーにスムーズなキーボード ナビゲーション エクスペリエンスを提供するうえで重要です。スクリーン リーダーなどの支援技術が、DOM 順にページを移動します。情報のフローは理にかなっている必要があります。
手動でのテスト方法
アプリケーションのタブ順が論理的かどうかを確認するには、タブでページを移動してみます。 一般的にフォーカスは読み上げ順に従い、左から右、ページの上から下へ向かうようにする必要があります。
タブの順序を評価する際は、主に 2 つの点を考慮する必要があります。
- DOM 内の要素は論理的な順序で配置されていますか。
- 画面外のコンテンツはナビゲーションから正しく非表示になっていますか？
ユーザーに不快感を与えると思われるナビゲーションのジャンプを確認します。また、タブ操作によって、表示されないコンテンツに移動できる画面外へのジャンプにも注意してください。
詳しくは、キーボード アクセスの基礎をご覧ください。
修正方法
フォーカスの順序が間違っていると思われる場合は、DOM 内の要素を再配置して、タブの順序を自然にする必要があります。
CSS を使用して要素の視覚的な再配置を行っていた場合、支援技術のユーザーには意味のないナビゲーションが発生します。CSS を使用する代わりに、要素を DOM 内の前の位置に移動します。
画面外のコンテンツにキーボード コントロールから引き続きアクセスできる場合は、tabindex="-1" を使用して削除することを検討してください。
詳しくは、tabindex を使用してフォーカスを制御するをご覧ください。