フォーカスがある要素を追跡する

  • [アーティクル]

フォーカスがある要素を常に示すには、コンソール ツールで Live Expression を使用 します 。 これは、ページのキーボード ナビゲーション アクセシビリティをテストする場合、Tab キーまたは Shift キーを押しながら Tab キーを押してレンダリングされた Web ページを移動すると、フォーカスがある要素が非表示または非表示になっているため、Web ページのフォーカス リング インジケーターが消えることがあるために役立ちます。

Live 式を使用して、フォーカスを持つ要素を決定する

ライブ式を使用して、DevTools のコンソールでタブフォーカス要素を追跡するには:

  1. アクセシビリティ テストのデモ Web ページ を新しいウィンドウまたはタブで開きます。

  2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  3. DevTools にクイック ビュー ツール バーが表示されない場合は、Esc キーを押してクイック ビュー パネルを表示します。

  4. [クイック ビュー] ツール バーで、[コンソール] タブを選択します。

    コンソール ツールの [クイック ビュー] パネル

  5. [ Create live expression (Create live expression )]\(ライブ式の作成\) ボタンをクリックします。 [Live Expression]\(ライブ式\) セクションが表示されます。

    ライブ式を作成する

  6. [式] テキスト ボックスに、「document.activeElement」と入力します。

  7. [ 式 ] テキスト ボックスの外側をクリックして、ライブ式を保存します。 ライブ式が評価され、結果が [ 式 ] テキスト ボックスの下に表示されます。

    Live 式の結果

  8. レンダリングされた Web ページをクリックしてフォーカスを置き、 Tab キーまたは Shift キーを押しながら Tab キーを押して、レンダリングされた Web ページ内でフォーカスを移動します。

    次 document.activeElement に示す値は、式の結果です。 Tab キーを押して Web ページの要素間を移動すると、値がdocument.activeElement変更されます。

    テキスト ボックスが Web ページにフォーカスされている場合のライブ式の結果

ライブ式の JavaScript コードはリアルタイムで評価され、コードの下に表示される結果は常に現在の式の値を表します。

ライブ式の値は、テキスト プレビューとして のみコンソール に表示されます。 DOM ノードは、タグ名とオプションのクラス属性または ID 属性を使用してレンダリングされます。 例:

  • アンカー要素 <a href="#alpacas">Alpacas</a> が Live Expression の結果に表示されます a#alpacas 。
  • ライブ式の結果にテキスト ボックス <input> が表示されます input 。

レンダリングされた Web ページにフォーカスがある要素を示すには、次のセクションで説明するように Elements ツールを使用します。

[要素] ツールでフォーカスを持つ要素を開きます

Live Expression の document.activeElement 結果は、フォーカスを持つ DOM 要素のプレビューにすぎません。 レンダリングされた Web ページにフォーカスがある要素を正確に把握するには、 要素 ツールを使用します。

  1. コンソール ツールで、ライブ式の結果 (ライブ式の下) にマウス ポインターをdocument.activeElement合わせます。

    フォーカスされた要素は、レンダリングされた Web ページで強調表示されています。

    レンダリングされた Web ページで強調表示されているフォーカスされた要素

  2. ライブ式の結果を右クリックし、[ 要素] パネルで [表示] を選択します。

    [要素] ツールでは、DOM ツリーが自動的に展開され、現在フォーカスされている DOM ノードが選択されます。

    [要素] ツールで選択されているフォーカスされた要素

    アクティブな要素は、Tab キーまたは Shift キーを押しながら Tab キーを押して移動した Web ページアイテムの DOM ツリー表現です。

コンソール ツールでフォーカスのある要素への参照を作成する

コンソール ツールでフォーカスされた要素を操作するには、その要素への参照を作成します。

  1. コンソール ツールで、ライブ式の結果 (ライブ式の下) にマウス ポインターをdocument.activeElement合わせます。

  2. ライブ式の結果を右クリックし、[ 外側の HTML をグローバル変数として格納する] を選択します。

    などの temp1 新しい変数名が コンソール ツールに表示され、その値が次のようにレンダリングされます。

    コンソール ツールの新しい変数としてフォーカスされた要素

  3. 変数を使用して、必要に応じて コンソール ツールの 要素を使用します temp1 。 たとえば、 を実行 temp1.value = "cat" して、フォーカスされた要素の値を "cat" に変更します。

    フォーカスされた要素の値が

関連項目

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。