デフォルトの DOM 順序の重要性
ネイティブ要素は DOM 内の位置に基づいて自動的にタブオーダーに挿入されるため、フォーカスの動作について学ぶには、ネイティブ要素を操作すると便利です。
たとえば、DOM 内に 3 つのボタン要素が連続して配置されているとします。Tab キーを押すと、各ボタンに順番にフォーカスが合わせられます。以下のコードブロックをクリックしてフォーカス ナビゲーションの開始点を移動し、Tab キーを押してボタン間でフォーカスを移動してみてください。
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
ただし、CSS を使用すると、DOM 内の順序が同じでも、画面上の表示順序は異なる場合があります。たとえば、float などの CSS プロパティを使用して 1 つのボタンを右に移動すると、ボタンは画面上で異なる順序で表示されます。ただし DOM での順序は変わらないため、タブの順序も変わりません。ユーザーがページを移動する際、ボタンは直感的ではない順序でフォーカスを取得します。以下のコードブロックをクリックしてフォーカス ナビゲーションの開始点を移動し、Tab を押してボタン間でフォーカスを移動してみてください。
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
CSS を使用して画面上の要素の視覚的な位置を変更するときは注意してください。これにより、キーボードを使用しているユーザーにとって、タブの順序がランダムにずれて混乱する可能性があります。このため、ウェブ AIM チェックリストには、セクション 1.3.2 で、コードの順序によって決定される読み取りとナビゲーションの順序は論理的かつ直感的であるべきと記載されています。
原則として、ページを何度かタブで移動して、タブの順序を間違えないように注意してください。それほど労力もかからないので 良い習慣です
画面外コンテンツ
レスポンシブ サイド ナビゲーションなど、現在表示されていないコンテンツがまだ DOM 内にある必要がある場合は、どうすればよいでしょうか。このような要素が画面外にあるときにフォーカスを受け取る場合、ユーザーがページを移動したときにフォーカスが消えたり再表示されたりするように見えることがありますが、これは明らかに望ましくない効果です。理想的には、パネルが画面外にあるときはフォーカスを取得しないようにし、ユーザーが操作できる場合にのみパネルがフォーカスされるようにします。
フォーカスがどこに移ったかを知るために、多少の検出作業が必要になることがあります。現在フォーカスされている要素を確認するには、コンソールから document.activeElement を使用します。
フォーカスされている画面外要素を把握したら、display: none または visibility: hidden に設定してから、ユーザーに表示する前に display:
block または visibility: visible に戻します。
一般に、公開前にタブでサイトを移動し、タブの順序が消えたり、論理的な順序から外れたりしていないか確認することをおすすめします。その場合は、display: none または visibility: hidden を使用して画面外のコンテンツを適切に非表示にするか、DOM 内の要素の物理的な位置を論理的な順序で再配置する必要があります。