支援技術を使用して DevTools をナビゲートする
この記事では、キーボードやスクリーン リーダーなどの支援技術を使用して DevTools を使用するのに役立ちます。 このガイドでは、最もアクセスしやすいツールとタブについて説明し、発生する可能性がある問題を強調します。
Web ページのアクセシビリティの向上に関連する DevTools 機能については、「 アクセシビリティテスト機能」を参照してください。
タブとページを含むタブ付きツール パネル
タブ、ツール、パネルの用語については、「DevTools の概要」の「タブとページを含むタブ付きツール パネル」を参照してください。
技術的には、タブは ARIA タブリストです。
キーボード ショートカット
DevTools の既定のキーボード ショートカットについては、「 キーボード ショートカット」を参照してください。 さまざまなツールを探索するときは、必ずブックマークを付けて参照してください。
DevTools を開く
Microsoft Edge では、次のいずれかの方法でマウスまたはキーボードを使用して DevTools を開くことができます。 どのツールを開くかは、DevTools を開く方法によって異なります。
主な方法:
| アクション | 結果のツール |
|---|---|
| Web ページ上の任意の項目を右クリックし、[ 検査] を選択します。 | [ 要素] ツール。DOM ツリーが展開され、右クリックされたページ要素が表示されます。 |
| Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 | 以前に使用したツール、または ウェルカム ツール。 |
| F12 キーを押します。 | 以前に使用したツール、または ウェルカム ツール。 |
その他の方法:
| アクション | 結果のツール |
|---|---|
Microsoft Edge ツール バーで、[設定など] (![[設定など] アイコン](navigation-images/edge-settings-and-more-icon.png){kind=icon} ) > [その他のツール>開発者ツールを選択します。 |
以前に使用したツール、または ウェルカム ツール。 |
| Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 | コンソール ツール。 |
| Ctrl + Shift + C (Windows、Linux) または Command + Option + C (macOS) を押します。 | DOM ツリーが展開され、<body>要素が表示される Elements ツール。 |
| Shift キーを押しながら F10 キーを押して右クリック メニューを開きます。 [検査] コマンドを選択するには、上方向キーを押して Enter キーを押します。 | DOM ツリーが展開され、<html>要素が表示される Elements ツール。 |
| Tab キーまたは Shift キーを押しながら Tab キーを押して、ページ要素にフォーカスを移動します。 次に 、Shift キーを押しながら F10 キーを押して右クリック メニューを開きます。 [検査] コマンドを選択するには、上方向キーを押して Enter キーを押します。 | [ 要素] ツール。DOM ツリーが展開され、フォーカスされたページ要素が表示されます。 |
ツール間を移動する
キーボード ナビゲーション キーを使用するか、コマンド メニューを使用して、ツール間を移動できます。
キーボードで移動する
DevTools を開いた状態で Ctrl + ] (Windows、Linux) または Command+] (macOS) を押して、 アクティビティ バーの次のツールにフォーカスを移動します。
Ctrl + [ (Windows、Linux) または Command + [ (macOS) を押して、アクティビティ バーの前のツールにフォーカスを移動します。
Tab キーまたは Shift キーを押しながら Tab キーを繰り返し押すと、フォーカスがアクティビティ バーまたはクイック ビュー ツール バーのタブに移動し、方向キーを使用してツール間を移動します。
既知の問題:
コンソール ツールやパフォーマンス ツールなどの一部のツールは、ツールが選択されるとすぐにツールのコンテンツ領域にフォーカスを移動することがあります。 これにより、方向キーによる移動が困難になる可能性があります。
選択したツールの名前が発表されますが、ツール内のフォーカスされたコンテンツを発表した後にのみ通知されます。 この一連のアナウンスにより、ツールの名前を簡単に見逃す可能性があります。
コマンド メニューで移動
特定のツールを選択するには、 コマンド メニューを使用します。 コマンド メニューでは、ツールは パネル または クイック ビュー 項目として示されます。
DevTools を開いた状態で、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して 、コマンド メニューを開きます。
コマンド メニューは、あいまい検索オートコンプリート コンボ ボックスです。
ツールの名前を入力し、キーボードの 下方向キー を使用して正しいオプションに移動します。
Enter キーを押してコマンドを実行します。
要素ツールを開くには:
コマンド メニューを開きます。
要素の入力を開始し、[要素の表示] コマンドを選択し、Enter キーを押します。
この方法でツールを開くと、ツールのコンテンツ領域にフォーカスが移動します。 要素ツールの場合、フォーカスは DOM ツリーに移動します。
要素ツール
ページ上の要素を検査する
スクリーン リーダーのカーソルを使用して、検査する要素に移動します。
要素を右クリックし、[ 検査 ] オプションを選択します。 これにより 、要素ツールが開き、DOM ツリー内の要素にフォーカスが合います。
DOM ツリーは ARIA ツリーとしてレイアウトされています。 例については、「 キーボードを使用して DOM ツリー を移動する」を参照してください。
DOM ツリー内の要素のコードをコピーする
DOM ツリー内のノードを右クリックします。
[ コピー ] オプションを展開します。
[ Copy outerHTML]\(外部HTML のコピー\) を選択します。
既知の問題:
- 多くの場合、コピー outerHTML は現在のノードを選択しませんが、代わりに親ノードを選択します。 ただし、要素の内容は、コピーした
outerHTMLに残っている必要があります。
DOM ツリー内の要素の属性を変更する
DOM ツリーのノードにフォーカスがある場合は、 Enter キーを押してノードを編集します。
Tab キーを押して属性値間を移動します。 "space" と読み上げられると、空のテキスト入力の中に入り、新しい属性値を入力できます。
Ctrl + Enter (Windows、Linux) または Command + Enter (macOS) を押して変更を受け入れ、要素の内容全体を読み上げます。
既知の問題:
- テキスト入力を入力しても、フィードバックは得されません。 入力ミスを行い、矢印キーを使用して入力を調べる場合は、フィードバックも受け取らなくなります。 作業をチェックする最も簡単な方法は、変更を受け入れてから、発表される要素全体をリッスンする方法です。
DOM ツリー内の要素の HTML を編集する
DOM ツリーのノードにフォーカスがある場合は、 Enter キーを押してノードを編集します。
Tab キーを押して属性値間を移動します。 たとえば、
h2要素の名前が読み上げられると、テキスト入力の内部に入り、要素の型を変更できます。Ctrl キーを押しながら Enter キー (Windows、Linux) または Command + Enter (macOS) キーを押して変更を受け入れます。
たとえば、 h3 と入力し、 Ctrl キーを押しながら Enter キー (Windows、Linux) または Command + Enter (macOS) キーを押すと、 h3 要素の開始タグと終了タグが変更されます。
要素ツールのタブ
要素ツールには、要素に適用された CSS やアクセシビリティ ツリー内の関連する場所などを検査するための追加のタブが含まれています。
DOM ツリーにフォーカスがある場合は、[スタイル] ウィンドウが選択されていると読み上げられるまで Tab キーを押します。
右方向キーを押して、他の使用可能なタブを調べる。
DOM ツリーは、href属性を持つ要素をフォーカス可能なリンクに変換するため、[スタイル] ウィンドウに到達するには Tab キーを複数回押す必要がある場合があります。
既知の問題:
[DOM ブレークポイント] タブと [プロパティ] タブにはキーボードでアクセスできません。
[スタイル] ウィンドウ
[ スタイル ] ウィンドウには、スタイルのフィルター処理、要素の状態の切り替え ( :active や :focus など)、クラスの切り替え、新しいクラスの追加を行うコントロールがあります。 DOM ツリーにフォーカスがある要素に現在適用されているスタイルを調べて変更するための強力なスタイル検査ツールもあります。
[ スタイル ] ウィンドウについて理解する主な概念は、 DOM ツリーで現在選択されているノードのスタイルのみを表示することです。 たとえば、 <header> ノードのスタイルの検査が完了し、 <footer> ノードのスタイルを確認するとします。 そのためには、まず DOM ツリーで<footer> ノードを選択する必要があります。
検査ワークフローを使用して、DOM ツリーに焦点を当てたfooter ノードの一般的な近くにあるノード (フッター内のリンクなど) を検査し、キーボードを使用して目的のノードに移動する方が速い場合があります。
[スタイル] ウィンドウを移動する
すべてのスタイル ツールが一方向または別の方法で [スタイル ] ウィンドウに接続されるため、最初にこのツールのエキスパートになるのが理にかなっています。
[ スタイル ] ウィンドウにフォーカスを置き、 Tab キー を押してフォーカスを内側に移動し、コンテンツを探索します。
最初のスタイルがアクティブになるまで Tab キー を押します。 スクリーン リーダーを使用している場合、この最初のスタイルは
element.style {}として発表されます。下方向キーを押して、スタイルの一覧を特定の順序で移動します。 スクリーン リーダーは、CSS ファイルの名前、スタイルが表示される行番号、スタイルの名前で始まる各スタイルを読み上げる。 たとえば、「
main.css:233 .card__img {}」のように入力します。Enter キーを押して、スタイルの詳細を調べます。 スタイル名の編集可能なバージョンでフォーカスが開始されます。
Tab キーを押して、各 CSS プロパティの編集可能なバージョンと対応する値の間を移動します。 各スタイル ブロックの末尾には、追加の CSS プロパティを追加するために使用できる空白の編集可能なテキスト フィールドがあります。
引き続き Tab キーを押してスタイルの一覧を移動するか、 Esc キーを押してモードを終了し、方向キーで移動できます。
その他のショートカットについては、「 スタイル ウィンドウのキーボード リファレンス」を参照してください。
既知の問題:
- [編集可能なテキストの フィルター] フィールドを使用する場合、スタイルの一覧を移動することはできません。
要素の状態を切り替える
:activeや:focusなど、要素の状態を切り替えるには:
[スタイル] ウィンドウに移動し、[要素の状態の切り替え] ボタンにフォーカスが移るまで Tab キーを押します。
Enter キーを押して、チェック ボックスを含む [要素の状態を強制する] セクションを表示します。
最初の状態 (
:active) にフォーカスが設定されるまで Tab キーを押します。Space キーを押して、チェック ボックスをオン (有効) にします。 DOM ツリーで現在選択されている要素に
:activeスタイルがある場合は、その要素が適用されます。Tab キーを押して、使用可能なすべての状態を調べることができます。
既存のクラスを追加する
[ 要素クラス ] ボタンは、[ 要素の状態の切り替え ] ボタンの横にあります。 [ 要素クラス ] ボタンにフォーカスを移動するには、 Tab キーを押してから Enter キーを押します。 [ 新しいクラスの追加] というラベルが付いた編集テキスト フィールドにフォーカスが移動します。
[要素クラス] ボタンは、主に要素に既存のクラスを追加するために使用されます。 たとえば、スタイル シートに .clearfix という名前のヘルパー クラスが含まれている場合は、編集テキスト フィールド内の . を押して、クラスの候補リストを表示し、 下矢印を 使用して .clearfix 提案を見つけることができます。 または、クラス名を自分で入力し、 Enter キーを押して適用します。
新しいスタイルルールを追加する
[ 要素クラス ] ボタンの隣には、[ 新しいスタイル規則 ] ボタンがあります。 フォーカスを移動するには、 Tab キー を押し、 Enter キーを押します。 スタイル インスペクター内の編集可能なテキスト フィールドにフォーカスが移動します。 フィールドの最初のテキスト コンテンツは、 DOM ツリーで選択されている要素のタグ名です。 このフィールドに任意のクラス名を入力し、 Tab キー を押して CSS プロパティを割り当てることができます。
[計算済み] タブ
[計算済み] タブにフォーカスがある状態で、Tab キーを押してフォーカスを内側に移動し、コンテンツを探索します。 [ 計算] タブには、具体的な順序で要素に実際に適用される CSS プロパティを調べるためのコントロールがあります。
計算されたすべてのスタイルを調べる
計算されたスタイルのコレクションに到達するまで Tab キーを押します。 計算されたスタイルは ARIA ツリーとして表示されます。 リストボックスを展開すると、計算されたスタイルを適用している CSS セレクターが表示されます。 これらのセレクターは、特異性によって整理されます。 スクリーン リーダーは、CSS セレクターが現在一致している計算値、セレクターを含むスタイルシートのファイル名、セレクターの行番号を読み上げる。
既知の問題:
- [テキストのフィルター] フィールドを使用すると、スタイルを検査できなくなります。
[イベント リスナー] タブ
要素に適用されるイベント リスナーを検査するには、[ 要素 ] ツールを選択し、[ イベント リスナー ] タブ ([ スタイル ] タブでグループ化) を選択します。
[ スタイル ] タブにフォーカスがある場合は、 右方向キー を押して [ イベント リスナー ] タブに移動します。
イベント リスナーを調べる
イベント リスナーは ARIA ツリーとして表示されます。 方向キーを使用して移動できます。 スクリーン リーダーは、イベント リスナーがアタッチされている DOM オブジェクトの名前と、イベント リスナーが定義されているファイル名と行番号を読み上げる。
[アクセシビリティ] タブ
[要素] ツールの [アクセシビリティ] タブ内を移動するには、Tab キーを選択します。
[ アクセシビリティ ] タブは、[ スタイル ] タブの近くに表示されます。[アクセシビリティ] タブには、アクセシビリティ ツリー、要素に適用される ARIA 属性、および計算されたアクセシビリティ プロパティを調べるためのコントロールがあります。 「 [アクセシビリティ] タブを使用してアクセシビリティをテストする」を参照してください。
アクセシビリティ ツリー
アクセシビリティ ツリーは、各treeitemが DOM 内の要素に対応する ARIA ツリーとして表示されます。 ツリーは、選択したノードの計算されたロールをアナウンスします。
divやspanなどのジェネリック要素は、ツリー内で "GenericContainer" として発表されます。 矢印キーを使用してツリーを走査し、親子関係を探索します。
既知の問題:
- [アクセシビリティ] タブで使用される ARIA ツリーの種類が、VoiceOver などの macOS スクリーン リーダー用の Microsoft Edge で正しく公開されない場合があります。 問題 #868480 Chromiumサブスクライブして、この問題の進行状況について通知を受け取ります。
- 各 ARIA 属性 セクションと 計算プロパティ セクションは ARIA ツリーとしてマークされますが、各セクションには現在フォーカス管理はなく、キーボード操作可能ではありません。
検査ツールのツールヒントとグリッドカラーオーバーレイの永続化
[検査] ツール ボタンをクリックし、レンダリングされた Web ページ内を移動すると、[検査] ツールヒントが変更されます。 現在のヒントとグリッドカラーオーバーレイを表示したままにするには、レンダリングされた Web ページ内を移動しながら Ctrl + Alt (Windows、Linux) または Ctrl + Option (macOS) を長押しします。
この手法は、拡大鏡やその他の支援技術を使用する場合に役立ちます。 検査ツールのツールヒントを保持しない場合、検査 ツール (
) を使用すると、ホバー オーバーレイが常に変更されます。
「検査ツールを使用してページを分析する」を参照してください。
Lighthouse ツール
Lighthouse では、サイトに対して一連のテストを実行して、パフォーマンス、アクセシビリティ、SEO、その他のカテゴリに関連する一般的な問題をチェックします。
レポートを構成して生成する
Lighthouse ツールが DevTools で最初に開かれると、[レポートの生成] ボタンにフォーカスが移動します。 既定では、シミュレートされた 3G 接続でモバイル エミュレーションを使用して、すべてのカテゴリのレポートを実行するようにフォームが構成されます。
レポートの設定を変更するには、 Shift + Tab キー を使用して Lighthouse の設定にフォーカスを置くか、参照モードに戻ります。
レポートを実行する準備ができたら、[レポートの 生成 ] ボタンに戻り、 Enter キーを押します。
[ キャンセル] ボタンを使用してモーダル ウィンドウにフォーカスを移動します。これにより、監査を終了できます。 監査が実行され、ページが複数回更新されると、一連の earcons が読み上げられる場合があります。
既知の問題:
- 現在、構成フォームのさまざまなセクションは、
fieldset要素でマークされていません。 各セクションに関連付けられているコントロールを見つけ出すには、参照モードで移動する方が簡単な場合があります。 - 監査の実行が完了したときに、earcon やライブ リージョンのお知らせはありません。 通常、監査には約 30 秒かかります。その後、結果に移動できます。 結果に到達する最も簡単な方法は、参照モードを使用することです。
Lighthouse レポートを移動する
Lighthouse レポートは、各監査カテゴリに対応するセクションに編成されています。 レポートが開き、各カテゴリのスコアの一覧が表示されます。 これらのスコアは、関連するセクションにスキップするために使用できるリンクでもあります。 各セクション内には、成功または失敗した監査に関連する情報を含む展開可能な details 要素があります。 既定では、失敗した監査のみが表示されます。 各セクションは、渡されたすべての監査を含む最終的な details 要素で終わります。
新しい監査を実行するには、 Shift + Tab キー を使用してレポートを終了し、[ レポートの生成 ] ボタンを選択します。
関連項目
注:
このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、Rob Dodson によって作成されています。
