ページ上での視覚的な順序は DOM の順序に従います
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
論理的なタブ順序は、ユーザーがスムーズなキーボード エクスペリエンスを実現するうえで重要です。スクリーン リーダーなどの支援技術は、DOM 順にページを移動します。
情報の流れは理にかなっている必要があります。
手動テストの方法
アプリケーションのタブ順序が論理的かどうかを確認するには、ページをタブで移動してみてください。通常、フォーカスはページの上から下に向かって読み取り順に移動します。ほとんどの言語では、読む順番は左から右へ向かっています。アラビア語やヘブライ語などでは、読む順番が右から左に移動する言語もあります。
タブの順序を評価する際は、主に次の 2 つの点に留意します。
- DOM の要素は論理的な順序で配置されていますか。
- 画面外コンテンツはナビゲーションから正しく非表示になっていますか?
ナビゲーションのジャンプが、不快に感じます。
また、画面外でのジャンプ(タブで意図しないコンテンツに移動する)にも注意してください。
詳しくは、キーボード アクセスの基本をご覧ください。
修正方法
フォーカス順序が正しくないと思われる場合は、DOM 内の要素を並べ替えて、タブオーダーをより自然にします。
CSS を使用して要素の視覚的な再配置は避けてください。支援技術を利用するユーザーが無意味なナビゲーションをする可能性があるためです。CSS を使用する代わりに、要素を DOM 内の以前の位置に移動します。
画面外のコンテンツにキーボード コントロールでアクセスできる場合は、tabindex="-1"
を使用して削除することを検討してください。
詳しくは、tabindex を使用してフォーカスを制御するをご覧ください。
リソース
ページ上の視覚的な順序が DOM の順序に従っている監査のソースコード
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2019-05-02 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2019-05-02 UTC。"],[],[]]