ユーザー補助機能のリファレンス

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

このページは、Chrome DevTools のユーザー補助機能の包括的なリファレンスです。このドキュメントは、次のようなウェブ デベロッパーを対象としています。

このリファレンスは、ページのユーザー補助機能を調べる際に役立つ DevTools のすべてのツールを紹介することを目的としています。

スクリーン リーダーなどの支援技術を使用して DevTools を操作する方法については、支援技術を使用した Chrome DevTools の操作をご覧ください。

ユーザーが利用しやすいウェブサイトの開発方法については、ユーザー補助について学ぶをご覧ください。

Chrome DevTools のユーザー補助機能の概要

このセクションでは、ユーザー補助ツールキット全体における DevTools の位置付けについて説明します。

ページがアクセス可能かどうかを判断するには、次の 2 つの一般的な質問を考慮する必要があります。

  1. キーボードやスクリーン リーダーを使用してページ内を移動できますか？
  2. ページの要素はスクリーン リーダー用に適切にマークアップされていますか？

一般的に、質問 2 に関連するエラーは DevTools を使用して修正できます。これらのエラーは自動的に検出しやすいからです。質問 1 も同様に重要ですが、残念ながら DevTools では対応できません。質問 1 に関連するエラーを見つける唯一の方法は、キーボードまたはスクリーン リーダーでページを使用してみることです。詳しくは、ユーザー補助機能の審査方法をご覧ください。

ページのユーザー補助機能を監査する

通常は、[Lighthouse] パネルの下にあるユーザー補助機能チェックを使用して、以下に該当するかどうかを判断します。

  • ページがスクリーン リーダー用に適切にマークアップされている。
  • ページ上のテキスト要素のコントラスト比が十分である。ウェブサイトを読みやすくするもご覧ください。

ページを監査するには:

  1. 監査する URL に移動します。

  2. DevTools で [Lighthouse] タブをクリックします。DevTools にさまざまな構成オプションが表示されます。

    Lighthouse パネルでユーザー補助スキャンを設定する。

  3. モバイル デバイスをシミュレートする場合は、[Device] で [Mobile] を選択します。このオプションでは、ユーザー エージェント文字列が異なり、ビューポートのサイズが変更されます。モバイル版とパソコン版でページの表示が異なる場合、このオプションは監査の結果に大きな影響を与える可能性があります。

  4. [Lighthouse] セクションで、[Accessibility] が有効になっていることを確認します。他のカテゴリをレポートから除外する場合は、無効にします。ページの品質を向上させるその他の方法を確認したい場合は、有効のままにしておきます。

  5. [スロットリング] セクションでは、ネットワークと CPU をスロットリングできます。これは、負荷パフォーマンスを分析する際に役立ちます。このオプションはユーザー補助スコアとは無関係なので、自由に使用できます。

  6. [ストレージを消去] チェックボックスをオンにすると、ページの読み込み前にストレージをすべて消去したり、ページの読み込みの間にストレージを保持したりできます。また、このオプションはおそらくアクセシビリティ スコアとは無関係なので、自由に使用できます。

  7. [Generate Report]（レポートを生成）をクリックします。10 ～ 30 秒後に、DevTools によってレポートが表示されます。レポートでは、ページのユーザー補助機能を向上させるためのさまざまなヒントが得られます。

    レポート。

  8. 監査をクリックすると、詳細が表示されます。

    監査の詳細。

  9. [詳細] をクリックすると、その監査のドキュメントが表示されます。

    監査のドキュメントを閲覧する。

関連情報: aXe 拡張機能

Chrome でデフォルトで使用できる Lighthouse パネルではなく、aXe 拡張機能または Lighthouse 拡張機能を使用することをおすすめします。 aXe は Lighthouse パネルの基盤となるエンジンであるため、提供される情報は通常同じです。aXe 拡張機能の UI は異なっており、監査の説明が若干異なります。

aXe 拡張機能。

監査パネルに対する aXe 拡張機能の利点の一つは、障害が発生したノードを検査してハイライト表示できることです。

[ユーザー補助機能] ペイン

[Accessibility] ペインでは、DOM ノードのアクセシビリティ ツリー、ARIA 属性、計算されたアクセシビリティ プロパティが表示されます。

[ユーザー補助機能] ペインを開くには:

  1. [要素] タブをクリックします。
  2. [DOM Tree] で、検査する要素を選択します。
  3. [ユーザー補助機能] タブをクリックします。このタブは、[その他のタブ] その他のタブ ボタンの背後に隠れている場合があります。

[Accessibility] ペインで DevTools のホームページの h1 要素を調べます。

ユーザー補助ツリーでの要素の位置を表示する

アクセシビリティ ツリーは DOM ツリーのサブセットです。これには、スクリーン リーダーでページのコンテンツを表示するのに関連する DOM ツリーの要素のみが含まれます。

[ユーザー補助] ペインで、ユーザー補助ツリー内の要素の位置を確認できます。

ユーザー補助ツリー セクション

このビューでは、単一のノードとその祖先のみを確認できます。ユーザー補助ツリー全体を確認する手順は次のとおりです。

（プレビュー）ページ全体を覆うユーザー補助ツリーを確認する

ユーザー補助ツリーを全画面表示すると、ツリー全体を探索でき、支援技術に対してウェブ コンテンツがどのように公開されているかを詳しく把握できます。

ユーザー補助ツリーを調べるには:

  1. [科学 全ページアクセシビリティ ツリーを有効にする] チェックボックスをオンにします。

  2. 上部のアクションバーで、[再読み込み DevTools] をクリックします。

    全画面のユーザー補助ツリーを有効にする

  3. [要素] パネルの右上にある [ユーザー補助機能ツリー表示に切り替える] ボタン ユーザー補助 を切り替えます。

    ユーザー補助ツリーを全画面表示

  4. ユーザー補助ツリーを確認します。ノードを展開するか、[計算済みプロパティ] をクリックして詳細を表示できます。

  5. ノードを選択して ユーザー補助 [DOM ツリービューに切り替え] ボタンをクリックすると、DOM ツリーに戻ります。

    対応する DOM ノードが選択されました。これは、DOM ノードとそのアクセシビリティ ツリーノードとの間のマッピングを理解するのに最適な方法です。

要素の ARIA 属性を表示する

ARIA 属性を使用すると、スクリーン リーダーはページのコンテンツを正しく表現するために必要なすべての情報を取得できます。

[ユーザー補助] ペインで要素の ARIA 属性を確認できます。

[ARIA 属性] セクション

画面上の要素のソース順序を表示する

ページ上の要素は、ソース内の順序で表示されるとは限りません。支援技術に頼ってウェブを閲覧していると、混乱を招く可能性があります。

ウェブサイトでソース注文を表示してデバッグするには:

  1. ページ上の要素を検査します。
  2. [要素] > [ユーザー補助] > [Source Order Viewer] で、チェックボックス。 [Show source order] をオンにします。

ビューポートでは、DevTools によってネストされた要素が枠線で囲まれ、ソースの順序に対応する番号でマークされます。

ソース順序オプションをオンにしました。

要素の計算済みユーザー補助プロパティを表示する

一部のユーザー補助プロパティは、ブラウザによって動的に計算されます。これらのプロパティは、[ユーザー補助] ペインの [計算済みプロパティ] セクションで確認できます。

要素の計算済みのユーザー補助プロパティを [ユーザー補助機能] ペインで確認する。

[計算済み（ユーザー補助）プロパティ] セクション。

低コントラストのテキストを検出して修正する

DevTools では、低コントラストの問題が自動的に検出され、修正に役立つ適切な色が提案されます。詳しくは、ウェブサイトを読みやすくするをご覧ください。