キーボードとスクリーン リーダーのサポートに関するアクセシビリティ ツリーを確認する

キーボードとスクリーン リーダーのサポートにチェックいくつかの DevTools 機能。 Inspect ツールを使用して、各ページ要素のアクセシビリティを個別にチェックすると、かなり時間がかかる場合があります。 Web ページをチェックする別の方法は、アクセシビリティ ツリーを使用することです。 アクセシビリティ ツリーは、スクリーン リーダーなどの支援技術にページが提供する情報を示します。

アクセシビリティ ツリーは DOM ツリーのサブセットであり、DOM ツリーの要素が含まれており、ページの内容をスクリーン リーダーに表示するのに役立ちます。 アクセシビリティ ツリーは、[要素] ツールの [アクセシビリティ] タブにあります ([スタイル] タブの近く)。

アクセシビリティ ツリーを使用して調べるには:

1. アクセシビリティ テストのデモ Web ページ を新しいウィンドウまたはタブで開きます。

2. DevTools を開くには、Web ページを右クリックし、検査を選択します。 あるいは、Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の左上隅にある [ 検査 ] () ボタンを選択して、ボタンが強調表示 (青) になるようにします。

4. レンダリングされた Web ページの [ 寄付 ] セクションで、[ 100 ] ボタンにカーソルを合わせます。 検査ツールオーバーレイが表示されます。

5. レンダリングされた Web ページで、[ 100 ] ボタンをクリックします。 DevTools では、 要素 ツールが表示されます。 DOM ツリーには、100 ボタンの<div class="donationbutton">100</div>要素が表示されます。 [ スタイル ] ウィンドウには、 要素に適用される CSS ルールが表示されます。

   

6. [ スタイル ] タブの右側にある [ アクセシビリティ ] タブを選択します。要素の アクセシビリティ ツリー が表示され、展開されます。

   

名前を持たない、または generic の役割を持つツリー内の要素 ( <div class="donationbutton">100</div> 要素など) は問題です。これは、その要素がキーボード ユーザーや支援技術を使用しているユーザーには使用できないためです。

関連項目

• アクセシビリティ ツリー内の要素の位置を表示する