アクセシビリティテスト機能

アクセシビリティについて Web ページをテストするには、まず、テストするアクセシビリティの側面のチェックリストを作成し、関連する DevTools 機能を使用して各側面を確認します。

画像の代替テキスト

アクセシビリティの側面を確認する DevTools の機能 アーティクルまたは小見出し
画像に代替テキストがあることを確認する レポートの [問題 ] ツール >の [アクセシビリティ ] セクション 画像に代替テキストがあることを確認する

キーボードのサポート

アクセシビリティの側面を確認する DevTools の機能 アーティクルまたは小見出し
キーボードのサポートを確認する オーバーレイの [ツールのアクセシビリティ] セクションを検査する> 検査ツールを使用して、Web ページにカーソルを合わせ、検査ツールを使用して HTML ページを分析することでアクセシビリティの問題を検出する
キーボードのサポートを確認する TabShift+Tab、および Enter キー Tab キーと Enter キーを使用してキーボードのサポートを確認する
キーボードのサポートを確認する: フォーカスが示されていることを確認します 検査 ツール、 スタイル タブ、 およびソース ツール サイドバー メニューにキーボード フォーカスが表示されていないことを分析する
キーボードのサポートを確認する: フォーム ボタンがキーボードで使用できることを確認する [要素] ツールの [検査] ツール、DOM ツリー、および [イベント リスナー] タブ フォームでのキーボード サポートの欠如を分析する
キーボードのサポートを確認する: キーの順序を確認 Tab する [要素] ツール > [アクセシビリティ] タブ [ソース注文ビューアー]> ソース注文ビューアーを使用してキーボードのサポートをテストする

テキストのコントラスト

アクセシビリティの側面を確認する DevTools の機能 アーティクルまたは小見出し
テキストに十分なコントラストがあることを確認します (ページ全体に対して自動的に) レポートの [問題 ] ツール >の [アクセシビリティ ] セクション テキストの色に十分なコントラストがあることを確認する
テキストに十分なコントラストがあることを確認する [要素] ツール>の [スタイル] タブの [色の選択]> カラー ピッカーを使用してテキストと色のコントラストをテストする
テキストに十分なコントラストがあることを確認する オーバーレイ>の [コントラスト] 行の [アクセシビリティ] セクションを検査する> 検査ツールを使用して、Web ページにカーソルを合わせ、検査ツールを使用して HTML ページを分析することでアクセシビリティの問題を検出する
テキストに十分なコントラストがあることを確認する: ホバー状態 [要素] ツール>の [スタイル] タブ [>要素の状態の切り替え] ([要素の状態の強制] チェック ボックスが表示されます) 要素のすべての状態のアクセシビリティを確認する
テキストに十分なコントラストがあることを確認します。ダーク テーマ (ダーク モード) と明るいテーマ レンダリング ツール >CSS メディア機能をエミュレートする ダーク テーマとライト テーマのコントラストの問題を確認する

スクリーン リーダーのサポート

アクセシビリティの側面を確認する DevTools の機能 アーティクルまたは小見出し
スクリーン リーダーのサポートを確認する: 入力フィールドにラベルがあることを確認する レポートの [問題 ] ツール >の [アクセシビリティ ] セクション 入力フィールドにラベルがあることを確認する
スクリーン リーダーのサポートを確認する オーバーレイ>ロールの [アクセシビリティ] セクションを検査する> 検査ツールを使用して、Web ページにカーソルを合わせ、検査ツールを使用して HTML ページを分析することでアクセシビリティの問題を検出する
スクリーン リーダーのサポートを確認する [要素] ツール > [アクセシビリティ] タブの [アクセシビリティ ツリー]> キーボードとスクリーン リーダーのサポートについてはアクセシビリティ ツリーを確認し、[アクセシビリティ ] タブを使用してアクセシビリティをテストする

視覚障害

アクセシビリティの側面を確認する DevTools の機能 アーティクルまたは小見出し
色覚異常のあるユーザーが Web ページを使用できるかどうかを確認する レンダリング ツール >の [視覚障害のエミュレート ] ドロップダウン リスト 色覚異常のあるユーザーがページを使用できるかどうかを確認する
ぼやけた視覚で Web ページが使用可能であることを確認する レンダリング ツール >の [視覚障害のエミュレート ] ドロップダウン リスト ぼやけた視覚でページが使用可能であることを確認する
UI アニメーションをオフにして Web ページが使用可能であることを確認する (モーションを減らす) レンダリング ツール >CSS メディア機能をエミュレートする UI アニメーションがオフになっているページが使用可能であることを確認する

狭い場合に使用可能

アクセシビリティの側面を確認する DevTools の機能 アーティクルまたは小見出し
狭い場合に Web ページレイアウトが使用可能であることを確認する デバイス エミュレーション ツール Web ページ レイアウトが狭い場合に使用可能であることを確認し、 モバイル デバイスをエミュレートする (デバイス エミュレーション)

関連項目