このページは、Chrome DevTools のユーザー補助機能の包括的なリファレンスです。このコースは、次のようなウェブ デベロッパーを対象としています。
- DevTools の使い方など、DevTools の基本を理解している。
- ユーザー補助の原則とベスト プラクティスに精通している。
このリファレンスの目的は、ページのユーザー補助機能の検査に利用できる DevTools のすべてのツールを紹介することです。
スクリーン リーダーなどの支援技術を使用して DevTools を操作する方法については、支援技術を使用した Chrome DevTools の操作をご覧ください。
誰にとっても使いやすいウェブサイトを作成する方法については、ユーザー補助機能の詳細をご覧ください。
Chrome DevTools のユーザー補助機能の概要
このセクションでは、DevTools がユーザー補助ツールキット全体にどのように適合するかについて説明します。
ページがアクセス可能かどうかを判断する際は、次の 2 つの一般的な質問を念頭に置く必要があります。
- キーボードやスクリーン リーダーでページを移動できますか?
- ページの要素は、スクリーン リーダー用に適切にマークアップされていますか。
一般に、DevTools を使用すると質問 2 に関連するエラーを修正できます。これらのエラーは自動化された方法で簡単に検出できるためです。質問 1 も同様に重要ですが、残念ながら DevTools では解決できません。質問 1 に関連するエラーを見つける唯一の方法は、キーボードまたはスクリーン リーダーを使用するページを試すことです。詳しくは、ユーザー補助の審査方法をご覧ください。
ページのアクセシビリティを監査する
通常は、[Lighthouse] パネルのユーザー補助機能チェックを使用して、次の条件を満たしているかどうかを確認します。
- スクリーン リーダー用にページが適切にマークアップされている。
- ページのテキスト要素のコントラスト比が十分である。ウェブサイトを読みやすくするもご覧ください。
ページを監査するには:
- 監査する URL に移動します。
DevTools で、[Lighthouse] タブをクリックします。DevTools に、さまざまな構成オプションが表示されます。
モバイル デバイスをシミュレートする場合は、[Device] で [Mobile] を選択します。このオプションは、ユーザー エージェント文字列とは異なる方法で変更し、ビューポートのサイズを変更します。モバイル版と PC 版でページの表示が異なる場合、このオプションは監査の結果に大きな影響を与える可能性があります。
[Lighthouse] セクションで [ユーザー補助] が有効になっていることを確認します。他のカテゴリをレポートから除外する場合は、そのカテゴリを無効にします。ページの品質を向上させる他の方法を見つけるには、これらを有効にしておきます。
[スロットル処理] セクションでは、ネットワークと CPU をスロットリングできます。これは、負荷のパフォーマンスを分析する際に役立ちます。このオプションは、ユーザー補助スコアとは無関係のものでなければなりません。そのため、任意の値を使用できます。
[ストレージを消去] チェックボックスを使用すると、ページの読み込み前にすべてのストレージを消去したり、ページの読み込み後もストレージを保持したりできます。このオプションは、おそらくユーザー補助スコアとは無関係であるため、お好みのものを使用できます。
[レポートを生成] をクリックします。10 ~ 30 秒後にレポートが表示されます。レポートには、ページのアクセシビリティを改善するさまざまなヒントが含まれています。
監査をクリックすると、その詳細が表示されます。
[詳細] をクリックすると、その監査のドキュメントが表示されます。
関連項目: aXe 拡張機能
Chrome でデフォルトで利用可能な Lighthouse パネルではなく、aXe 拡張機能または Lighthouse 拡張機能を使用することをおすすめします。 aXe は Lighthouse パネルを基盤とするエンジンであるため、通常は同じ情報が提供されます。aXe 拡張機能の UI は異なり、監査の説明が若干異なります。
aXe 拡張機能の [Audits] パネルと比較した利点の 1 つは、失敗したノードを検査してハイライト表示できることです。
ユーザー補助ペイン
[ユーザー補助] ペインでは、ユーザー補助ツリー、ARIA 属性、計算された DOM ノードのユーザー補助プロパティを確認できます。
ユーザー補助機能ペインを開くには:
- [要素] タブをクリックします。
- [DOM Tree] で、検査する要素を選択します。
- [ユーザー補助機能] タブをクリックします。このタブは、[その他のタブ] ボタンの背後に隠れている場合があります。
ユーザー補助ツリー内の要素の位置を表示する
ユーザー補助ツリーは、DOM ツリーのサブセットです。これには、スクリーン リーダーでページのコンテンツを表示するのに役立つ、DOM ツリーの要素のみが含まれます。
[ユーザー補助] ペインで、ユーザー補助ツリー内の要素の位置を調べます。
このビューでは、1 つのノードとその祖先のみを確認できます。ユーザー補助ツリー全体を探索するには、次の手順を行います。
(プレビュー)ページ全体のユーザー補助ツリーを確認する
ユーザー補助ツリーを全画面表示すると、ツリー全体を探索でき、ウェブ コンテンツが支援技術にどのように公開されているかを詳しく把握できます。
ユーザー補助ツリーを確認するには:
- [ Enable Full-pageAccessibility tree] チェックボックスをオンにします。
上部のアクションバーで [DevTools の再読み込み] をクリックします。
[要素] パネルの右上にある [ユーザー補助ツリー表示に切り替える] ボタンを切り替えます。
ユーザー補助ツリーを確認します。ノードを展開するか、[計算済みプロパティ] でクリックすると詳細が表示されます。
ノードを選択し、 [Switch to DOM tree view] ボタンをクリックして DOM ツリーに戻ります。
対応する DOM ノードが選択されます。DOM ノードとそのユーザー補助ツリーのノードとの間のマッピングは、これが最もわかりやすくなります。
要素の ARIA 属性を表示する
ARIA 属性を使用すると、ページのコンテンツを適切に表すために必要なすべての情報がスクリーン リーダーに提供されます。
ユーザー補助ペインで要素の ARIA 属性を確認します。
画面上の要素のソース順序を表示する
ページ上の要素が、必ずしもソース内の順序で表示されるとは限りません。これにより、支援技術を利用してウェブを閲覧しているユーザーを混乱させる可能性があります。
ウェブサイトでソース注文を表示してデバッグするには:
- ページの要素を検査します。
- [要素] > [ユーザー補助] > [ソースの順序閲覧者] で、 [ソースの順序を表示] をオンにします。
ビューポートでは、ネストされた要素の枠線が枠線付きで表示され、ソースの順序に対応する番号でマークされます。
要素の算出されたユーザー補助プロパティを表示する
一部のユーザー補助プロパティは、ブラウザによって動的に計算されます。これらのプロパティは、[ユーザー補助] ペインの [計算済みプロパティ] セクションで確認できます。
要素に対して計算されたユーザー補助プロパティは、[ユーザー補助] ペインで確認できます。
低コントラストのテキストを見つけて修正する
DevTools では低コントラストの問題が自動的に検出され、修正しやすい色が提案されます。詳しくは、ウェブサイトを読みやすくするをご覧ください。