アクセシビリティテスト機能
アクセシビリティについて Web ページをテストするには、まず、テストするアクセシビリティの側面のチェックリストを作成し、関連する DevTools 機能を使用して各側面を確認します。
画像の代替テキスト
| アクセシビリティの側面を確認する | DevTools の機能 | アーティクルまたは小見出し |
|---|---|---|
| 画像に代替テキストがあることを確認する | レポートの [問題 ] ツール >の [アクセシビリティ ] セクション | 画像に代替テキストがあることを確認する |
キーボードのサポート
| アクセシビリティの側面を確認する | DevTools の機能 | アーティクルまたは小見出し |
|---|---|---|
| キーボードのサポートを確認する | オーバーレイの [ツールのアクセシビリティ] セクションを検査する> | 検査ツールを使用して、Web ページにカーソルを合わせ、検査ツールを使用して HTML ページを分析することでアクセシビリティの問題を検出する |
| キーボードのサポートを確認する | Tab、 Shift+Tab、および Enter キー |
Tab キーと Enter キーを使用してキーボードのサポートを確認する |
| キーボードのサポートを確認する: フォーカスが示されていることを確認します | 検査 ツール、 スタイル タブ、 およびソース ツール | サイドバー メニューにキーボード フォーカスが表示されていないことを分析する |
| キーボードのサポートを確認する: フォーム ボタンがキーボードで使用できることを確認する | [要素] ツールの [検査] ツール、DOM ツリー、および [イベント リスナー] タブ | フォームでのキーボード サポートの欠如を分析する |
キーボードのサポートを確認する: キーの順序を確認 Tab する |
[要素] ツール > [アクセシビリティ] タブ [ソース注文ビューアー]> | ソース注文ビューアーを使用してキーボードのサポートをテストする |
テキストのコントラスト
| アクセシビリティの側面を確認する | DevTools の機能 | アーティクルまたは小見出し |
|---|---|---|
| テキストに十分なコントラストがあることを確認します (ページ全体に対して自動的に) | レポートの [問題 ] ツール >の [アクセシビリティ ] セクション | テキストの色に十分なコントラストがあることを確認する |
| テキストに十分なコントラストがあることを確認する | [要素] ツール>の [スタイル] タブの [色の選択]> | カラー ピッカーを使用してテキストと色のコントラストをテストする |
| テキストに十分なコントラストがあることを確認する | オーバーレイ>の [コントラスト] 行の [アクセシビリティ] セクションを検査する> | 検査ツールを使用して、Web ページにカーソルを合わせ、検査ツールを使用して HTML ページを分析することでアクセシビリティの問題を検出する |
| テキストに十分なコントラストがあることを確認する: ホバー状態 | [要素] ツール>の [スタイル] タブ [>要素の状態の切り替え] ([要素の状態の強制] チェック ボックスが表示されます) | 要素のすべての状態のアクセシビリティを確認する |
| テキストに十分なコントラストがあることを確認します。ダーク テーマ (ダーク モード) と明るいテーマ | レンダリング ツール >CSS メディア機能をエミュレートする | ダーク テーマとライト テーマのコントラストの問題を確認する |
スクリーン リーダーのサポート
| アクセシビリティの側面を確認する | DevTools の機能 | アーティクルまたは小見出し |
|---|---|---|
| スクリーン リーダーのサポートを確認する: 入力フィールドにラベルがあることを確認する | レポートの [問題 ] ツール >の [アクセシビリティ ] セクション | 入力フィールドにラベルがあることを確認する |
| スクリーン リーダーのサポートを確認する | オーバーレイ>名とロールの [アクセシビリティ] セクションを検査する> | 検査ツールを使用して、Web ページにカーソルを合わせ、検査ツールを使用して HTML ページを分析することでアクセシビリティの問題を検出する |
| スクリーン リーダーのサポートを確認する | [要素] ツール > [アクセシビリティ] タブの [アクセシビリティ ツリー]> | キーボードとスクリーン リーダーのサポートについてはアクセシビリティ ツリーを確認し、[アクセシビリティ ] タブを使用してアクセシビリティをテストする |
視覚障害
| アクセシビリティの側面を確認する | DevTools の機能 | アーティクルまたは小見出し |
|---|---|---|
| 色覚異常のあるユーザーが Web ページを使用できるかどうかを確認する | レンダリング ツール >の [視覚障害のエミュレート ] ドロップダウン リスト | 色覚異常のあるユーザーがページを使用できるかどうかを確認する |
| ぼやけた視覚で Web ページが使用可能であることを確認する | レンダリング ツール >の [視覚障害のエミュレート ] ドロップダウン リスト | ぼやけた視覚でページが使用可能であることを確認する |
| UI アニメーションをオフにして Web ページが使用可能であることを確認する (モーションを減らす) | レンダリング ツール >CSS メディア機能をエミュレートする | UI アニメーションがオフになっているページが使用可能であることを確認する |
狭い場合に使用可能
| アクセシビリティの側面を確認する | DevTools の機能 | アーティクルまたは小見出し |
|---|---|---|
| 狭い場合に Web ページレイアウトが使用可能であることを確認する | デバイス エミュレーション ツール | Web ページ レイアウトが狭い場合に使用可能であることを確認し、 モバイル デバイスをエミュレートする (デバイス エミュレーション) |