このガイドは、スクリーン リーダーなどのユーザー補助技術に主に依存しているユーザーが Chrome DevTools にアクセスして使用できるようにすることを目的としています。Chrome DevTools は、Google Chrome ブラウザに組み込まれているウェブ デベロッパー向けのツールスイートです。ウェブページのユーザー補助機能の改善に関連する DevTools の機能については、ユーザー補助リファレンスをご覧ください。
DevTools のユーザー補助機能は現在開発中です。一部のパネルとタブは、他のパネルやタブよりも支援技術との連携が良好です。このガイドでは、最もアクセスしやすいパネルについて説明します。また、その過程で発生する可能性のある特定の問題についても説明します。
概要
始める前に、DevTools UI の構造を把握しておくと役に立ちます。DevTools は、ARIA tablist に編成された一連のパネルに分かれています。次に例を示します。
- [要素] パネルでは、DOM ノードまたは CSS を表示、変更できます。
- [コンソール] パネルでは、JavaScript ログの読み取りやオブジェクトのライブ編集を行うことができます。
各パネルのコンテンツ領域には、さまざまなツールがあります。ドキュメントでは、これらのツールは多くの場合、タブまたはペインと呼ばれます。たとえば、[要素] パネルには、イベント リスナーやユーザー補助ツリーなどを検査するための追加のタブがあります。タブとペインの区別は多少恣意的です。どちらの用語が使用されるかは、公式の DevTools ドキュメントの他の部分との整合性を保つためです。
キーボード ショートカット
DevTools のキーボード ショートカット リファレンスは便利なクイック リファレンスです。ブックマークに登録して、さまざまなパネルを調べる際に参照できるようにしておいてください。
DevTools を開く
はじめに、Chrome DevTools を開くをご覧ください。DevTools を開く方法はいくつかあります。キーボード ショートカットやメニュー アイテムを使用できます。
パネル間を移動する
キーボードで移動する
- デベロッパー ツールを開き、Ctrl+] キー（Windows）または Command+] キー（Mac）を押して、次のパネルにフォーカスを移動します。
- Ctrl+[ キーまたは Command+[ キー（Mac）を押して、前のパネルにフォーカスを合わせます。
- Shift+Tab キーを使用してパネルの
tablistにフォーカスを移動し、矢印キーを使用してパネルを変更することもできますが、前述のショートカットを使用する方が速い場合があります。
既知の問題
- コンソールパネルやパフォーマンス パネルなど、一部のパネルでは、有効になるとすぐにフォーカスがコンテンツ領域に移動することがあります。これにより、矢印キーによる操作が難しくなる可能性があります。
- 選択したパネルの名前が読み上げられますが、パネル内のフォーカスされたコンテンツが読み上げられた後にのみ読み上げられます。そのため、見落としやすくなります。
コマンド メニューで移動する
特定のパネルにフォーカスを合わせるには、コマンド メニューを使用します。
- デベロッパー ツールを開き、Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押してコマンド メニューを開きます。コマンド メニューは、あいまい検索の予測入力コンボボックスです。
- 開くパネルの名前を入力し、キーボードの下矢印を使用して目的のオプションに移動します。
- Enter キーを押してコマンドを実行します。
たとえば、[要素] パネルを開くには:
- コマンド メニューを開きます。
- 「E」と入力し、[L] を押します。[パネル] > [要素を表示] オプションが選択されています。
- Enter キーを押してコマンドを実行し、パネルを開きます。
この方法でパネルを開くと、パネル自体のコンテンツにフォーカスが移動します。[要素] パネルの場合、フォーカスは [DOM ツリー] に移動します。
[要素] パネル
ページ上の要素を検査する
- スクリーン リーダーのカーソルを使用して、検査する要素に移動します。
- 要素を右クリックしてコンテキスト メニューを開きます。
- [検証] オプションを選択します。これにより、要素パネルが開き、DOM ツリー内の要素にフォーカスが当てられます。
DOM ツリーは ARIA tree としてレイアウトされます。例については、キーボードで DOM ツリーを操作するをご覧ください。
DOM ツリー内の要素のコードをコピーする
- DOM ツリー内のノードにフォーカスを当てて、右クリック コンテキスト メニューを表示します。
- [コピー] オプションを開きます。
- [outerHTML をコピー] を選択します。
既知の問題
- outerHTML をコピーすると、現在のノードではなく、その親ノードが選択されることがあります。ただし、要素の内容はコピーされた outerHTML に残ります。
DOM ツリー内の要素の属性を変更する
- DOM ツリー内のノードにフォーカスを当てて Enter キーを押すと、編集可能になります。
- Tab キーを押すと、属性値間を移動できます。「スペース」と聞こえたら、空のテキスト入力中であり、新しい属性値を入力できます。
- Ctrl+Enter キーまたは Command+Enter キー（Mac）を押して変更を受け入れ、要素のコンテンツ全体を読み上げます。
既知の問題
- テキスト入力欄に入力してもフィードバックが表示されません。入力ミスをして矢印キーを使用して入力内容を調べても、フィードバックは表示されません。変更を受け入れ、要素全体が読み上げられるのをリッスンするのが、作業を確認する最も簡単な方法です。
DOM ツリー内の要素の HTML を編集する
- DOM ツリー内のノードにフォーカスを当てて Enter キーを押すと、編集可能になります。
- Tab キーを押すと、属性値間を移動できます。要素の名前（「h2」など）が聞こえたら、テキスト入力中であり、要素のタイプを変更できます。
- 変更を承認するには、Ctrl+Enter キーまたは Command+Enter キー（Mac）を押します。
たとえば、h3 と入力して Ctrl+Enter キー（または Command+Enter キー（Mac））を押すと、要素の開始タグと終了タグが h3 に変わります。
要素パネルのタブ
[要素] パネルには、要素に適用された CSS や、アクセシビリティ ツリー内の要素の場所などを確認するための追加のタブがあります。
- DOM ツリー内のノードにフォーカスを当て、[スタイル] ペインが選択されたことを聞こえるまで Tab キーを押します。
- → キーを押すと、他のタブが表示されます。
DOM ツリーでは、href 属性を持つ要素がフォーカス可能なリンクに変換されるため、スタイルペインに移動するには Tab キーを複数回押す必要がある場合があります。
既知の問題
[DOM ブレークポイント] タブと [プロパティ] タブにはキーボードからアクセスできません。
スタイルペイン
[スタイル] ペインには、スタイルのフィルタリング、要素の状態（:active や :focus など）の切り替え、クラスの切り替え、新しいクラスの追加を行うためのコントロールがあります。また、DOM ツリーでフォーカスされている要素に現在適用されているスタイルを調べて変更できる、強力なスタイル検査ツールもあります。
[スタイル] ペインで理解しておくべき重要なコンセプトは、DOM ツリーで現在選択されているノードのスタイルのみが表示されることです。たとえば、<header> ノードのスタイルの検査が完了し、<footer> ノードのスタイルを確認するとします。これを行うには、まず DOM ツリーで <footer> ノードを選択する必要があります。検査ワークフローを使用して、footer ノードの近辺にあるノード（フッター内のリンクなど）を検査し、DOM ツリーにフォーカスを合わせ、キーボードを使用して目的のノードに移動する方が早い場合があります。
スタイルペインで操作する
すべてのスタイルツールは、何らかの形で [スタイル] ペインに接続されているため、まずこのツールをマスターすることをおすすめします。
- [スタイル] ペインにフォーカスを合わせ、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 tree として表示されます。リストボックスを開くと、計算されたスタイルを適用している CSS セレクタが表示されます。これらのセレクタは、特定度別に整理されます。スクリーン リーダーは、計算された値、現在一致している CSS セレクタ、セレクタを含むスタイルシートのファイル名、セレクタの行番号を読み上げます。
既知の問題
- [フィルタ] テキスト フィールドを使用すると、スタイルを検査できなくなります。
[イベント リスナー] タブ
[要素] パネルで、[イベント リスナー] タブを使用して、要素に適用されているイベント リスナーを調べることができます。[スタイル] ペインにフォーカスを当てて、右矢印キーを押して [イベント リスナー] タブに移動します。
イベント リスナーを調べる
イベント リスナーは ARIA tree として表示されます。矢印キーを使用して移動できます。スクリーン リーダーは、イベント リスナーが接続されている DOM オブジェクトの名前、イベント リスナーが定義されているファイル名、行番号を読み上げます。
ユーザー補助ペイン
[ユーザー補助] ペインにフォーカスを合わせ、Tab キーを押してフォーカスを内部に移動し、コンテンツを調べます。[ユーザー補助] ペインには、ユーザー補助ツリー、要素に適用された ARIA 属性、計算されたユーザー補助プロパティを調べるためのコントロールがあります。
ユーザー補助ツリー
ユーザー補助ツリーは ARIA tree として表示されます。各 treeitem は DOM 内の要素に対応しています。ツリーには、選択したノードの計算されたロールが表示されます。div や span などの汎用要素は、ツリーで「GenericContainer」として宣言されます。矢印キーを使用してツリーを移動し、親子関係を確認します。
既知の問題
- [ユーザー補助] ペインで使用される ARIA ツリーのタイプが、macOS スクリーン リーダー（VoiceOver など）の Chrome で正しく公開されない場合があります。Chromium の問題 #868480 を登録して、この問題の進捗状況を確認してください。
- [ARIA 属性] セクションと [計算プロパティ] セクションは ARIA ツリーとしてマークアップされていますが、現在はフォーカス管理がないため、キーボードで操作できません。
[監査] パネル
[チェック] パネルでは、サイトに対して一連のテストを行い、パフォーマンス、ユーザー補助、SEO、その他のカテゴリに関連する一般的な問題を確認できます。
監査を構成して実行する
- [監査] パネルを初めて開くと、フォームの末尾にある [監査を実行] ボタンがフォーカスされます。デフォルトでは、シミュレートされた 3G 接続でモバイル エミュレーションを使用して、すべてのカテゴリの監査を実行するようにフォームが構成されています。
- Shift+Tab キーを使用するか、ブラウジング モードで戻って監査設定を変更します。
- 監査を実行する準備ができたら、[監査を実行] ボタンに戻り、Enter キーを押します。
- フォーカスがモーダル ウィンドウに移動します。このウィンドウには、監査を終了できる [キャンセル] ボタンがあります。監査の実行中にページが複数回更新されるため、一連のイヤホン通知音が聞こえることがあります。
既知の問題
- 現在、構成フォームの各セクションは
fieldset要素でマークアップされていません。各セクションに関連付けられているコントロールを確認するには、ブラウジング モードで移動することをおすすめします。 - 監査の実行が完了しても、イヤホン通知音やライブ リージョンのアナウンスは鳴りません。通常、30 秒ほどで結果に移動できるようになります。結果に到達する最も簡単な方法は、ブラウジング モードを使用することです。
監査レポートを操作する
監査レポートは、各監査カテゴリに対応するセクションに編成されています。レポートが開き、各カテゴリのスコアが表示されます。これらのスコアは、関連するセクションにスキップするために使用できるリンクでもあります。各セクションには、展開可能な details 要素があり、合格または不合格となった監査に関する情報が含まれています。デフォルトでは、失敗した監査のみが表示されます。各セクションは、合格したすべての監査を含む最後の details 要素で終わります。
新しい監査を実行するには、Shift+Tab キーを押してレポートを終了し、[監査を実行] ボタンを探します。