デフォルトの 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 内での要素の物理的な位置を論理的な順序で並べ替える必要があります。