デフォルトの 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 を使用して画面上の要素の視覚的な位置を変更する際は、注意が必要です。これにより、タブ順序がランダムに飛び回り、キーボードに依存しているユーザーを混乱させる可能性があります。このため、Web AIM チェックリストのセクション 1.3.2 では、コード順序によって決定される読み取り順序とナビゲーション順序は論理的かつ直感的であるべきと規定されています。
タブ順序が誤って変更されていないことを確認するため、ページをタブで移動することをおすすめします。これは、あまり労力をかけずに習慣づけることができる良い習慣です。
画面外のコンテンツ
レスポンシブ サイドナビなど、現在は表示されていないが DOM に存在する必要があるコンテンツの場合はどうすればよいですか？画面外にあるときにフォーカスを受け取るこのような要素があると、ユーザーがタブでページを移動するときにフォーカスが消えて再び現れるように見えます。これは明らかに望ましくない効果です。理想的には、パネルが画面外にあるときはフォーカスされないようにし、ユーザーが操作できる場合にのみフォーカスできるようにする必要があります。
フォーカスがどこに移動したかを特定するために、少し調査が必要になることもあります。コンソールの document.activeElement を使用して、現在フォーカスされている要素を確認できます。
フォーカスされている画面外要素を特定したら、その要素を display: none または visibility: hidden に設定し、ユーザーに表示する前に display:
block または visibility: visible に設定し直します。
一般に、デベロッパーは、各公開前にサイトをタブで移動し、タブ順序が消えたり、論理的な順序から外れたりしていないことを確認することをおすすめします。表示されないコンテンツが画面外に表示される場合は、display: none または visibility: hidden を使用して適切に非表示にするか、DOM 内の要素の物理的な位置を並べ替えて論理的な順序にする必要があります。