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