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

Kayce Basques 氏
Kayce Basques
Twitter GitHub Glitch
ソフィア・エメリアノバ
Sofia Emelianova
GitHub

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

このリファレンスの目的は、ページのユーザー補助機能の検査に利用できる DevTools のすべてのツールを紹介することです。

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

誰にとっても使いやすいウェブサイトを作成する方法については、ユーザー補助機能の詳細をご覧ください。

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

このセクションでは、DevTools がユーザー補助ツールキット全体にどのように適合するかについて説明します。

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

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

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

ページのアクセシビリティを監査する

通常は、[Lighthouse] パネルのユーザー補助機能チェックを使用して、次の条件を満たしているかどうかを確認します。

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

ページを監査するには:

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

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

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

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

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

  5. [スロットル処理] セクションでは、ネットワークと CPU をスロットリングできます。これは、負荷のパフォーマンスを分析する際に役立ちます。このオプションは、ユーザー補助スコアとは無関係のものでなければなりません。そのため、任意の値を使用できます。

  6. [ストレージを消去] チェックボックスを使用すると、ページの読み込み前にすべてのストレージを消去したり、ページの読み込み後もストレージを保持したりできます。このオプションは、おそらくユーザー補助スコアとは無関係であるため、お好みのものを使用できます。

  7. [レポートを生成] をクリックします。10 ～ 30 秒後にレポートが表示されます。レポートには、ページのアクセシビリティを改善するさまざまなヒントが含まれています。

    レポート

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

    監査の詳細。

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

    監査のドキュメントを表示する。

関連項目: aXe 拡張機能

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

aXe 拡張機能。

aXe 拡張機能の [Audits] パネルと比較した利点の 1 つは、失敗したノードを検査してハイライト表示できることです。

ユーザー補助ペイン

[ユーザー補助] ペインでは、ユーザー補助ツリー、ARIA 属性、計算された DOM ノードのユーザー補助プロパティを確認できます。

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

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

[ユーザー補助機能] ペインで DevTools ホームページの h1 要素を調べます。

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

ユーザー補助ツリーは、DOM ツリーのサブセットです。これには、スクリーン リーダーでページのコンテンツを表示するのに役立つ、DOM ツリーの要素のみが含まれます。

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

Accessibility Tree セクション

このビューでは、1 つのノードとその祖先のみを確認できます。ユーザー補助ツリー全体を探索するには、次の手順を行います。

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

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

ユーザー補助ツリーを確認するには:

  1. [科学 Enable Full-pageAccessibility tree] チェックボックスをオンにします。

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

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

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

    ユーザー補助ツリーの全画面ビュー

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

  5. ノードを選択し、ユーザー補助 [Switch to DOM tree view] ボタンをクリックして DOM ツリーに戻ります。

    対応する DOM ノードが選択されます。DOM ノードとそのユーザー補助ツリーのノードとの間のマッピングは、これが最もわかりやすくなります。

要素の ARIA 属性を表示する

ARIA 属性を使用すると、ページのコンテンツを適切に表すために必要なすべての情報がスクリーン リーダーに提供されます。

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

ARIA Attributes セクション

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

ページ上の要素が、必ずしもソース内の順序で表示されるとは限りません。これにより、支援技術を利用してウェブを閲覧しているユーザーを混乱させる可能性があります。

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

  1. ページの要素を検査します。
  2. [要素] > [ユーザー補助] > [ソースの順序閲覧者] で、チェックボックス。 [ソースの順序を表示] をオンにします。

ビューポートでは、ネストされた要素の枠線が枠線付きで表示され、ソースの順序に対応する番号でマークされます。

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

要素の算出されたユーザー補助プロパティを表示する

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

要素に対して計算されたユーザー補助プロパティは、[ユーザー補助] ペインで確認できます。

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

低コントラストのテキストを見つけて修正する

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