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