[アクセシビリティ] タブを使用してアクセシビリティをテストする

[ アクセシビリティ ] タブでは、DOM ノードのアクセシビリティ ツリー、ARIA 属性、計算されたアクセシビリティ プロパティを表示できます。

[ アクセシビリティ ] タブを開くには:

1. レンダリングされた Web ページで要素を右クリックし、[ 検査] を選択します。

   DevTools が開き、[ 要素] ツールが選択されています。 DOM ツリーが開き、右クリックした要素が表示されます。

2. DOM ツリーで、検査する要素をクリックします。 方向キーを使用して DOM ツリー内を移動できます。

3. [スタイル] タブの右側にある [アクセシビリティ] タブをクリックします。最初に、[スタイル] タブの右側にある [] ボタン) をクリックする必要がある場合があります。

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

アクセシビリティ ツリーは DOM ツリーのサブセットです。 アクセシビリティ ツリーには DOM ツリーの要素のみが含まれており、スクリーン リーダーなどの支援技術を使用してページの内容を表示するのに役立ちます。

[アクセシビリティ] タブからアクセシビリティ ツリー内の要素の位置 を 調べます。

要素の ARIA 属性を表示する

ARIA 属性は、スクリーン リーダーなどの支援技術が、ページの内容を適切に表すために必要なすべての情報を確実に持っていることを保証します。

[アクセシビリティ] タブで、要素の ARIA 属性 を 表示します。

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

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

[アクセシビリティ] タブで、要素の計算された アクセシビリティ プロパティを 表示します。

計算されたアクセシビリティ プロパティは、計算された CSS プロパティとは異なります。 計算された CSS プロパティを表示する方法の詳細については、「CSS 機能リファレンスで要素に実際に適用されている CSS のみを表示する」を参照してください。

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。