このガイドは、スクリーン リーダーなどの支援技術を主に利用しているユーザーが Chrome DevTools にアクセスして使用する場合を対象としています。Chrome DevTools は、Google Chrome ブラウザに組み込まれているウェブ デベロッパー ツールのスイートです。ウェブページのユーザー補助機能の改善に関連する DevTools の機能をお探しの場合は、ユーザー補助のリファレンスをご覧ください。
DevTools のユーザー補助機能は現在開発中です。一部のパネルやタブは、支援技術を組み合わせることで他のパネルやタブよりも効果的に機能します。このガイドでは、最もアクセスしやすいパネルについて説明し、その過程で遭遇する可能性のある特定の問題に焦点を当てます。
概要
始める前に、DevTools の UI の構造に関するメンタルモデルを用意しておくといいでしょう。DevTools は一連のパネルに分割されており、各パネルは ARIA tablist にまとめられています。例:
- [要素] パネルでは、DOM ノードや CSS を表示、変更できます。
- [コンソール] パネルでは、JavaScript のログの読み取りとオブジェクトのライブ編集を行うことができます。
各パネルのコンテンツ領域には、さまざまなツールがあります。ドキュメントでは、タブまたはペインと呼ばれることもあります。たとえば、[要素] パネルには、イベント リスナーやユーザー補助ツリーなどを検証するための追加のタブが含まれています。タブとペインの区別はやや任意です。どちらかの用語が表示される唯一の理由は、DevTools の公式ドキュメントとの整合性を保つためです。
キーボード ショートカット
DevTools のキーボード ショートカット リファレンスは便利なクイック リファレンスです。ブックマークして、別のパネルを参照する際に参照してください。
DevTools を開く
まずは、Chrome DevTools を開くをご覧ください。DevTools を開く方法はいくつかあり、キーボード ショートカットまたはメニュー項目を使用します。
パネル間を移動する
キーボードで移動する
- DevTools を開いた状態で、Ctrl+] キーまたは Command+] キー（Mac）を押して、次のパネルにフォーカスします。
- Ctrl+[ キーまたは Command+[ キー（Mac）を押して、前のパネルにフォーカスします。
- Shift+Tab キーを使用してフォーカスをパネルの
tablistに移動し、矢印キーでパネルを変更することもできます。ただし、前述のショートカットを使用するほうが速い場合があります。
既知の問題
- [コンソール] パネルや [パフォーマンス] パネルなど、一部のパネルでは、有効になるとすぐにフォーカスがコンテンツ領域に移動することがあります。そのため、矢印キーで移動しにくくなる場合があります。
- 選択したパネルの名前は、パネル内のフォーカスされているコンテンツを読み上げた後にのみ読み上げられます。これは見逃されがちです。
コマンド メニューで移動
特定のパネルにフォーカスするには、コマンド メニューを使用します。
- DevTools を開いた状態で、Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押して、コマンド メニューを開きます。コマンド メニューは、ファジー検索のオートコンプリート コンボボックスです。
- 開くパネルの名前を入力し、下矢印キーボードを使用して適切なオプションに移動します。
- Enter キーを押して、コマンドを実行します。
たとえば、[要素] パネルを開くには次のようにします。
- コマンド メニューを開きます。
- E、L の順に入力します。[パネル] > [要素を表示] オプションが選択されています。
- Enter キーを押して、パネルを開くコマンドを実行します。
この方法でパネルを開くと、パネル自体のコンテンツにフォーカスが移動します。[要素] パネルの場合、フォーカスは [DOM ツリー] に移動します。
[要素] パネル
ページ上の要素を検査する
- スクリーン リーダーのカーソルを使用して、検証する要素に移動します。
- 要素を右クリックするとコンテキスト メニューが開きます。
- [検証] オプションを選択します。[要素] パネルが開き、DOM ツリー内で要素がフォーカスされます。
DOM ツリーは ARIA tree としてレイアウトされます。例については、キーボードで DOM ツリーを操作するをご覧ください。
DOM ツリーの要素のコードをコピーします
- DOM ツリーのノードにフォーカスして、右クリックのコンテキスト メニューを表示します。
- [コピー] オプションを開きます。
- [外部 HTML をコピー] を選択します。
既知の問題
- 多くの場合、「Copy 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 に変わります。
要素パネルのタブ
[Elements] パネルには、要素に適用された CSS やユーザー補助ツリー内の位置などを調べるためのタブが表示されます。
- DOM ツリーのノードにフォーカスを合わせて、[スタイル] ペインが選択されたという音声が聞こえるまで Tab キーを押す。
- 右矢印を使用して、使用可能な他のタブに移動します。
DOM ツリーは、href 属性を持つ要素をフォーカス可能なリンクに変換するため、[スタイル] ペインにアクセスするには、Tab を複数回押さなければならない場合があります。
既知の問題
[DOM ブレークポイント] タブと [プロパティ] タブには、キーボードでアクセスすることはできません。
[スタイル] ペイン
[Styles] ペインには、スタイルのフィルタリング、要素の状態の切り替え（:active や :focus など）、クラスの切り替え、新しいクラスの追加を行うためのコントロールがあります。また、強力なスタイル検査ツールもあり、DOM ツリーでフォーカスされている要素に現在適用されているスタイルを調べて修正できます。
[Styles] ペインを理解するうえで重要な点は、DOM Tree で現在選択されているノードのスタイルだけが表示されるという点です。たとえば、<header> ノードのスタイルを検査した後、<footer> ノードのスタイルを確認したいとします。そのためには、まず DOM ツリーで <footer> ノードを選択します。[Inspect] ワークフローを使用して、footer ノードのおおまかな近くにあるノード（フッター内のリンクなど）を検査し、DOM ツリーにフォーカスがあってから、キーボードを使用して目的のノードに移動すると、より速く操作できる場合があります。
[Styles] ペインの操作
すべてのスタイルツールはなんらかの方法で [Styles] ペインに接続されているため、まずこのツールを使いこなすことをおすすめします。
- [Styles] ペインにフォーカスを合わせ、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] という編集テキスト フィールドに移動します。
[Element Classes] ボタンは、主に要素に既存のクラスを追加するために使用します。たとえば、スタイルシートに .clearfix というヘルパークラスが含まれている場合、編集テキスト フィールド内で . キーを押すと、クラスの候補リストが表示され、下矢印を使用して .clearfix 候補を見つけることができます。または、クラス名を自分で入力し、Enter キーを押して適用します。
新しいスタイルルールを追加
[Element Classes] ボタンの横には、[New Style Rule] ボタンがあります。Tab キーを押して選択した項目にフォーカスを移動し、Enter キーを押します。スタイル インスペクタ内の編集可能なテキスト フィールドにフォーカスが移動します。このフィールドの最初のテキスト コンテンツは、DOM ツリーで選択されている要素のタグ名になります。このフィールドにクラス名を入力し、Tab キーを押して CSS プロパティを割り当てることができます。
[計算済み] タブ
[Computed] タブにフォーカスして、Tab キーを押すと、フォーカスが移動して内容が表示されます。[計算済み] タブには、実際に要素に適用されている CSS プロパティを、特定の順序で確認できるコントロールがあります。
すべての計算済みスタイルを確認
計算済みスタイルの一覧が表示されるまで Tab キーを押します。これらは ARIA tree として表示されます。リストボックスを開くと、計算されたスタイルを適用している CSS セレクタが表示されます。これらのセレクタは特異性ごとに整理されています。スクリーン リーダーは、計算値（現在 CSS セレクタが一致している値）、セレクタを含むスタイルシートのファイル名、セレクタの行番号を読み上げます。
既知の問題
- [フィルタ] テキスト フィールドを使用すると、スタイルの検査はできなくなります。
[イベント リスナー] タブ
[要素] パネルの [イベント リスナー] タブを使用すると、要素に適用されているイベント リスナーを確認できます。[Styles] ペインにフォーカスして、右矢印を押して [Event Listeners] タブに移動します。
イベント リスナーの詳細を確認する
イベント リスナーは ARIA tree として表示されます。矢印キーで移動できます。スクリーン リーダーは、イベント リスナーが追加されている DOM オブジェクトの名前と、イベント リスナーが定義されているファイル名、その行番号を読み上げます。
ユーザー補助ペイン
[ユーザー補助機能] ペインにフォーカスして Tab キーを押すと、内部にフォーカスが移動し、その内容が表示されます。[Accessibility] ペインには、ユーザー補助ツリー、要素に適用されている ARIA 属性、計算されたユーザー補助プロパティを調べるためのコントロールがあります。
ユーザー補助ツリー
ユーザー補助ツリーは、各 treeitem が DOM 内の要素に対応する ARIA tree として表示されます。ツリーには、選択したノードに対して計算されたロールが表示されます。div や span などの汎用要素は、ツリー内で「GenericContainer」として通知されます。矢印キーを使用してツリー内を移動し、親子関係を調べます。
既知の問題
- [ユーザー補助] ペインで使用される ARIA ツリーのタイプが、VoiceOver などの macOS スクリーン リーダー用の Chrome では適切に表示されない可能性があります。Chromium 問題 #868480 に登録すると、この問題の進捗状況が通知されます。
- [ARIA Attributes] セクションと [Computed Properties] セクションは、ARIA ツリーとしてマークアップされますが、現在はフォーカス管理がないためキーボード操作できません。
監査パネル
[Audits] パネルでは、サイトに対して一連のテストを実施して、パフォーマンス、ユーザー補助、SEO など、さまざまなカテゴリに関連する一般的な問題を確認できます。
監査を構成して実行する
- [Audits] パネルを初めて開いたときに、フォームの最後にある [Run Audit] ボタンにフォーカスが合っています。デフォルトでは、シミュレートされた 3G 接続でモバイル エミュレーションを使用して、すべてのカテゴリの監査を実行するようにフォームが構成されています。
- 監査設定を変更するには、Shift+Tab キーを使用するか、ブラウズモードに戻ってください。
- 監査を実行する準備ができたら、[Run Audit] ボタンに戻り、Enter キーを押します。
- フォーカスがモーダル ウィンドウに移動し、監査を終了できる [Cancel] ボタンが表示されます。監査が実行されてページが複数回更新されると、一連のイアコンが聞こえます。
既知の問題
- 現時点では、構成フォームのさまざまなセクションが
fieldset要素でマークアップされていません。各セクションに関連付けられているコントロールを見分けるには、ブラウズモードに移動する方が簡単な場合があります。 - 監査が完了した時点で、イアコンやライブ リージョンに関するお知らせは表示されません。通常は 30 秒ほどかかり、その後結果に移動できるようになります。ブラウズモードを使用すると、最も簡単に結果にアクセスできます。
監査レポートを操作する
監査レポートは、各監査カテゴリに対応するセクションにまとめられています。レポートが開き、各カテゴリのスコアのリストが表示されます。これらのスコアは、関連するセクションにスキップするために使用できるリンクでもあります。各セクション内には、展開可能な details 要素があります。この要素には、監査の合否に関する情報が含まれています。デフォルトでは、失敗した監査のみが表示されます。各セクションは、合格した監査をすべて含む最後の details 要素で終了します。
新しい監査を実行するには、Shift+Tab キーを使用してレポートを終了し、[Perform An Audit] ボタンを探します。