ページ上での視覚的な順序は DOM の順序に従います

論理的なタブ順序は、ユーザーがスムーズなキーボード エクスペリエンスを実現するうえで重要です。スクリーン リーダーなどの支援技術は、DOM 順にページを移動します。 情報の流れは理にかなっている必要があります。

アプリケーションのタブ順序が論理的かどうかを確認するには、ページをタブで移動してみてください。通常、フォーカスはページの上から下に向かって読み取り順に移動します。ほとんどの言語では、読む順番は左から右へ向かっています。アラビア語やヘブライ語などでは、読む順番が右から左に移動する言語もあります。

タブの順序を評価する際は、主に次の 2 つの点に留意します。

  • DOM の要素は論理的な順序で配置されていますか。
  • 画面外コンテンツはナビゲーションから正しく非表示になっていますか?

ナビゲーションのジャンプが、不快に感じます。 また、画面外でのジャンプ(タブで意図しないコンテンツに移動する)にも注意してください。

詳しくは、キーボード アクセスの基本をご覧ください。

修正方法

フォーカス順序が正しくないと思われる場合は、DOM 内の要素を並べ替えて、タブオーダーをより自然にします。

CSS を使用して要素の視覚的な再配置は避けてください。支援技術を利用するユーザーが無意味なナビゲーションをする可能性があるためです。CSS を使用する代わりに、要素を DOM 内の以前の位置に移動します。

画面外のコンテンツにキーボード コントロールでアクセスできる場合は、tabindex="-1" を使用して削除することを検討してください。

詳しくは、tabindex を使用してフォーカスを制御するをご覧ください。

リソース

ページ上の視覚的な順序が DOM の順序に従っている監査のソースコード