このページは Cloud Translation API によって翻訳されました。

DOM 順序が重要

デフォルトの DOM 順序の重要性

Dave Gash

Meggin Kearney

Rob Dodson

ネイティブ要素の操作は、フォーカスの動作を学ぶのに最適な方法ですカスタムディメンションは、現在のキャンペーンタイプに基づいて指定することもできます。

たとえば、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 を使用して画面外のコンテンツを表示すること、または要素を並べ替える論理的な位置に配置できるように、できます。