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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

このページでは、Chrome DevTools のユーザー補助機能について詳しく説明します。このコースは、次のようなウェブ デベロッパーを対象としています。

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

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

アクセシブルなウェブサイトを開発する方法については、Learn Accessibility をご覧ください。

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

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

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

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

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

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

一般に、[Lighthouse] パネルのユーザー補助チェックを使用して、次のことを判断します。

ページを監査するには:

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

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

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

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

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

  5. [スロットリング] セクションでは、ネットワークと CPU のスロットリングを行うことができます。これは、読み込みパフォーマンスを分析する際に役立ちます。このオプションはアクセシビリティ スコアには影響しないため、どちらを使用してもかまいません。

  6. [ストレージを消去] チェックボックスを使用すると、ページを読み込む前にすべてのストレージを消去したり、ページを読み込むたびにストレージを保持したりできます。このオプションはアクセシビリティ スコアにも影響しないため、どちらを使用しても構いません。

  7. [レポートを作成] をクリックします。10 ～ 30 秒後に、DevTools からレポートが提供されます。レポートには、ページのアクセシビリティを改善するためのさまざまなヒントが記載されています。

    レポート。

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

    監査の詳細。

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

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

関連情報: aXe 拡張機能

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

aXe 拡張機能。

aXe 拡張機能が [監査] パネルよりも優れている点の 1 つは、不合格のノードを検査してハイライト表示できることです。

デバイス ツールバーでコンテンツのリフローをテストする

Web Content Accessibility Guidelines（WCAG）のリフローの基準では、ビューポートのサイズが変更されたり、向きが変わったりしても、ウェブ コンテンツが情報を失うことなく表示されることが推奨されています。コンテンツを 1 列に配置することで、テキストを拡大して使用するユーザーをサポートします。コンテンツのリフローをテストするには、Lighthouse パネルのデバイス ツールバーを使用して、ビューポートのサイズを動的に変更します。

Lighthouse パネルのデバイス ツールバー。

ビューポートのサイズを変更するには、ハンドルを必要なサイズまでドラッグします。テストする特定のディメンションについては、WCAG のリフローの達成基準をご覧ください。

[ユーザー補助] タブ

[ユーザー補助] タブでは、DOM ノードのユーザー補助ツリー、ARIA 属性、計算されたユーザー補助プロパティを表示できます。

[ユーザー補助機能] タブを開くには:

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

[ユーザー補助] タブで div 要素を検査する。

[ユーザー補助] タブを前面にドラッグすると、今後すばやくアクセスできるようになります。

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

ユーザー補助ツリーは、DOM ツリーのサブセットです。スクリーン リーダーでページのコンテンツを表示するうえで関連性があり、有用な DOM ツリーの要素のみが含まれます。

[ユーザー補助] タブでユーザー補助ツリー内の要素の位置を検査するには、[ユーザー補助ツリーを表示する] を切り替えます。

[ユーザー補助ツリーを表示する] の切り替えがオンになっています。

この切り替えボタンをオンにすると、[要素] パネルの DOM ツリーがアクセシビリティ ツリーの全ページ表示に置き換わります。このツリーは、ウェブ コンテンツが支援技術にどのように公開されているかを理解するのに役立ちます。

アクセシビリティ ツリーを閲覧するには、ノードを開いて選択し、[計算されたプロパティ] で詳細を確認します。

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

要素の ARIA 属性を表示する

ARIA 属性により、スクリーン リーダーはページの内容を適切に表現するために必要なすべての情報を取得できます。

[ユーザー補助] タブで要素の ARIA 属性を表示します。

ARIA 属性のセクション。

画面上の要素のソースオーダーを表示する

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

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

  1. ページ上の要素を検証します。
  2. [Elements] > [Accessibility] > [Source Order Viewer] で、[check_box Show source order] をオンにします。

ビューポートで、DevTools はネストされた要素を枠線で囲み、ソースの順序に対応する番号を付けます。

ソースの順序オプションがオンになっている。

要素の計算されたアクセシビリティ プロパティを表示する

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

要素の計算されたユーザー補助プロパティをユーザー補助タブで確認します。

[計算済み（アクセシビリティ）プロパティ] セクション。

[レンダリング] タブ

[レンダリング] タブを使用すると、コードやテスト環境で手動で指定しなくても、特定の CSS メディア特性をエミュレートできます。これらのメディア機能は、ユーザーのデバイス設定に基づいてウェブページの外観を変更します。ページの視覚的なアクセシビリティをテストするには、[レンダリング] タブを開き、次のオプションを試します。

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

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