このガイドは、主にスクリーン リーダーなどの支援技術を利用しているユーザーが Chrome DevTools にアクセスして使用できるようにすることを目的としています。Chrome DevTools は、Google Chrome ブラウザに組み込まれているウェブ デベロッパー ツールのスイートです。ウェブページのユーザー補助機能を改善するための DevTools の機能については、ユーザー補助機能のリファレンスをご覧ください。
DevTools のユーザー補助機能は現在も開発が進められています。パネルやタブによっては、支援技術との相性が良いものもあれば、そうでないものもあります。このガイドでは、最もアクセスしやすいパネルについて説明し、その過程で発生する可能性のある特定の問題をハイライト表示します。
概要
始める前に、DevTools の UI がどのように構成されているかを把握しておくと便利です。DevTools は、ARIA tablist に整理された一連のパネルに分割されています。次に例を示します。
- [要素] パネルでは、DOM ノードまたは CSS を表示、変更できます。
- [コンソール] パネルでは、JavaScript ログを読み取ったり、オブジェクトをライブ編集したりできます。
各パネルのコンテンツ領域内には、さまざまなツールがあります。ドキュメントでは、これらのツールはタブまたはペインと呼ばれることがよくあります。たとえば、[要素] パネルには、イベント リスナーやアクセシビリティ ツリーなどを検査するための追加のタブがあります。タブとペインの区別はやや恣意的です。どちらかの用語が表示されるのは、公式の DevTools ドキュメントの他の部分との一貫性を保つためだけです。
キーボード ショートカット
DevTools のキーボード ショートカットのリファレンスは、便利なチートシートです。このページをブックマークして、さまざまなパネルを確認する際に参照してください。
DevTools を開く
まず、Chrome DevTools を開くをお読みください。DevTools を開くには、キーボード ショートカットまたはメニュー項目を使用します。
パネル間を移動する
キーボードで操作する
- デベロッパー ツールを開いた状態で、Ctrl+] キーまたは Command+] キー（Mac）を押して、次のパネルにフォーカスを移動します。
- Ctrl+[ キー（または Mac では Command+[ キー）を押して、前のパネルにフォーカスを合わせます。
- 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 キーを押して、属性値を移動します。「スペース」と聞こえたら、空のテキスト入力内にいるので、新しい属性値を入力できます。
- Control+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 キーの順に押して、フォーカスを移動します。フォーカスが [Add New Class]（新しいクラスを追加）というラベルの付いた編集テキスト フィールドに移動します。
[要素クラス] ボタンは、主に既存のクラスを要素に追加するために使用します。たとえば、スタイルシートに .clearfix という名前のヘルパークラスが含まれている場合、編集テキスト フィールド内で . を押すと、クラスの候補リストが表示され、下矢印を使用して .clearfix の候補を見つけることができます。または、クラス名を自分で入力して Enter キーを押して適用します。
新しいスタイルルールを追加する
[要素のクラス] ボタンの隣に [新しいスタイルルール] ボタンがあります。Tab キーを押してフォーカスを移動し、Enter キーを押します。フォーカスがスタイル インスペクタ内の編集可能なテキスト フィールドに移動します。フィールドの初期テキスト コンテンツは、DOM ツリーで選択されている要素のタグ名です。このフィールドに任意のクラス名を入力し、Tab キーを押して CSS プロパティを割り当てることができます。
[Computed] タブ
[Computed] タブにフォーカスがある状態で、Tab キーを押してフォーカスを内部に移動し、そのコンテンツを確認します。[計算済み] タブには、どの CSS プロパティが要素に適用されているかを詳細度の順に確認するためのコントロールがあります。
すべての計算済みスタイルを確認する
Tab キーを押して、計算されたスタイルのコレクションまで移動します。これらは ARIA tree として表示されます。リストボックスを開くと、どの CSS セレクタが計算されたスタイルを適用しているかが表示されます。これらのセレクタは、特異性によって整理されています。スクリーン リーダーは、計算された値、現在一致している CSS セレクタ、セレクタを含むスタイルシートのファイル名、セレクタの行番号を読み上げます。
既知の問題
- [フィルタ] テキスト フィールドを使用すると、スタイルを検査できなくなります。
[イベント リスナー] タブ
[要素] パネルで、[イベント リスナー] タブを使用して、要素に適用されているイベント リスナーを調べることができます。[スタイル] ペインにフォーカスがある状態で、右矢印を押して [イベント リスナー] タブに移動します。
イベント リスナーを調べる
イベント リスナーは ARIA tree として表示されます。矢印キーを使用して移動できます。スクリーン リーダーは、イベント リスナーがアタッチされている DOM オブジェクトの名前、イベント リスナーが定義されているファイル名、その行番号を読み上げます。
ユーザー補助ペイン
[ユーザー補助] ペインにフォーカスがある状態で、Tab キーを押してフォーカスを内部に移動し、その内容を確認します。[ユーザー補助] ペインには、ユーザー補助ツリー、要素に適用された ARIA 属性、計算されたユーザー補助プロパティを探索するためのコントロールがあります。
ユーザー補助ツリー
ユーザー補助ツリーは ARIA tree として表示され、各 treeitem は DOM 内の要素に対応します。ツリーは、選択したノードの計算されたロールをアナウンスします。div や span などの汎用要素は、ツリー内で「GenericContainer」としてアナウンスされます。矢印キーを使用してツリーを移動し、親子関係を確認します。
既知の問題
- [ユーザー補助] ペインで使用される ARIA ツリーのタイプが、macOS のスクリーン リーダー（VoiceOver など）で正しく公開されないことがあります。この問題の進捗状況については、Chromium の問題 #868480 を購読してください。
- [ARIA 属性] セクションと [計算されたプロパティ] セクションは ARIA ツリーとしてマークアップされていますが、現在フォーカス管理がないため、キーボード操作はできません。
[監査] パネル
[監査] パネルでは、サイトに対して一連のテストを実行し、パフォーマンス、アクセシビリティ、SEO、その他のカテゴリに関連する一般的な問題を確認できます。
監査を構成して実行する
- [監査] パネルを初めて開くと、フォームの最後にある [監査を実行] ボタンにフォーカスが置かれます。デフォルトでは、フォームはシミュレートされた 3G 接続でモバイル エミュレーションを使用して、すべてのカテゴリの監査を実行するように構成されています。
- 監査設定を変更するには、Shift+Tab キーを使用するか、ブラウズモードで戻ります。
- 監査を実行する準備ができたら、[監査を実行] ボタンに戻って Enter キーを押します。
- フォーカスが [キャンセル] ボタンのあるモーダル ウィンドウに移動し、監査を終了できます。監査が実行され、ページが複数回更新されると、一連のイヤーコンが聞こえることがあります。
既知の問題
- 現在、設定フォームの各セクションは
fieldset要素でマークアップされていません。閲覧モードで移動すると、各セクションに関連付けられているコントロールを把握しやすくなります。 - 監査の実行が完了しても、イヤコンやライブ リージョン アナウンスはありません。通常、約 30 秒で完了し、その後、結果に移動できるようになります。結果にたどり着く最も簡単な方法は、ブラウズモードを使用することです。
監査レポート内を移動する
監査レポートは、各監査カテゴリに対応するセクションに整理されています。レポートが開くと、各カテゴリのスコアのリストが表示されます。これらのスコアは、関連するセクションにスキップするために使用できるリンクでもあります。各セクション内には、合格または不合格の監査に関する情報を含む、展開可能な details 要素があります。デフォルトでは、失敗した監査のみが表示されます。各セクションは、合格したすべての監査を含む最終的な details 要素で終わります。
新しい監査を実行するには、Shift+Tab キーを押してレポートを終了し、[監査を実行] ボタンを探します。