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

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

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

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

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

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

3. [スタイル] タブの右側にある [アクセシビリティ] タブをクリックします。場合によっては、まず [スタイル] タブの右側にある [その他のタブ] ([) をクリックします。

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

アクセシビリティ ツリーは、DOM ツリーのサブセットです。 アクセシビリティ ツリーに含まれるのは、スクリーン リーダーなどの支援技術を使ってページのコンテンツを表示するために関連し有用な DOM ツリーの要素だけです。

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

要素の ARIA 属性を表示する

ARIA 属性は、スクリーン リーダーなどの支援技術がページのコンテンツを適切に表現するために必要なすべての情報を確実に含められるようにします。

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

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

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

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

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

注:

このページの一部の情報は、 Google によって 作成および共有されている著作物に基づいており、 Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Kayce Basques によって作成されています。

この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。