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