デフォルトの 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 に記載しています コードの順序によって決まる読み取りとナビゲーションの順序が、 直感的に理解できるようにします
原則として、ときどきタブを開いて、 タブオーダーが間違っていた ということはありませんこれはおすすめの習慣です。 多くの労力がかからない方法です
画面外のコンテンツ
現在表示されていないものの、表示する必要のあるコンテンツがある場合 どうすればよいでしょうか。このような要素がある場合、 フォーカスが当たったように見えるかもしれませんが、 ユーザーがページ内を移動すると消えたり再表示されたりします。 望ましくない結果が生じる可能性があります。パネルにフォーカスが当たらないようにするのが理想的です ユーザーが操作できるときにのみフォーカスが合うようにし、 できます。
フォーカスが置かれている場所を見つけるために、ちょっとした調査が必要になることもあります。
なくなります。コンソールの document.activeElement
を使用すると、
要素が現在フォーカスされている状態です。
オフスクリーン要素がフォーカスされていることを確認したら、
display: none
または visibility: hidden
に設定して、ユーザーに表示する前に display:
block
または visibility: visible
に戻します。
一般的には、各投稿の前にサイトをタブで確認して
タブオーダーが消えたり論理的にはみ出たりしないことを確認できます
あります。含まれている場合は、
display: none
または visibility: hidden
を使用して画面外のコンテンツを表示すること、または
要素を並べ替える論理的な位置に配置できるように、
できます。