デフォルトの 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 を使用して画面上での要素の視覚的な位置を変更する場合は注意が必要です。これにより、タブの順序がランダムに切り替わり、キーボードを使用しているユーザーの混乱を招く可能性があります。このような理由から、WebAIM チェックリストのセクション 1.3.2 では、コード順によって決定される読み取りとナビゲーションの順序は、論理的かつ直感的にする必要があると既定されています。
原則として、タブの順序をときどき確認して、タブの順序を間違えないようにしてください。この確認作業にはそれほど手間がかからないので、習慣的に行うことをお勧めします。
画面外コンテンツ
レスポンシブ サイド ナビゲーションなど、現在表示されていないものの DOM に残す必要があるコンテンツがある場合はどうすればよいでしょうか。このような要素が画面外でフォーカスを受け取る場合、ユーザーがページをタブで移動すると、フォーカスが消えて再表示されたように見えることがありますが、これは明らかに望ましくない結果です。理想的には、パネルが画面外にあるときはパネルがフォーカスされないようにし、ユーザーが操作できる場合にのみパネルがフォーカスされるようにします。
フォーカスの位置を特定するために、多少の調査が必要になることがあります。現在フォーカスされている要素を確認するには、コンソールで document.activeElement を使用します。
現在フォーカスが当たっている画面外の要素を特定したら、それを display: none または visibility: hidden に設定して、ユーザーに表示する前に display:
block または visibility: visible に戻すことができます。
一般に、公開前にデベロッパー側でサイト上をタブで移動し、フォーカスが消えたり、論理的ではない順序で移動したりしないことを確認することをおすすめします。問題がある場合は、display: none または visibility: hidden で画面外のコンテンツを適切に非表示にするか、要素の DOM での物理的な位置を変更して論理的な順序になるようにする必要があります。