トラック要素のフォーカス

Kayce Basques

Alexandra Klepper

ページのキーボード ナビゲーションのアクセシビリティをテストしているとします。 Tabキーでページを移動すると、フォーカスされている要素が非表示になっているため、フォーカス リングが表示されないことがあります。DevTools でフォーカスされている要素を追跡するには:

1. [コンソール] を開きます。

2. [Create Live Expression] をクリックします。

   

   詳しくは、ライブ式を使用して JavaScript の値をリアルタイムで監視するをご覧ください。

3. document.activeElement と入力します。

4. [ライブ式] インターフェースの外側をクリックして保存します。

document.activeElement の後の値は、式の結果です。この式は常にフォーカスされている要素を表すため、どの要素にフォーカスがあるかを追跡できます。

• 結果にカーソルを合わせると、ビューポートでフォーカスされている要素がハイライト表示されます。
• 結果を右クリックして [[要素] パネルで開く] を選択すると、[要素] パネルの DOM ツリーに要素が表示されます。
• 結果を右クリックして [グローバル変数として保存] を選択すると、[コンソール] で使用できるノードへの変数参照が作成されます。