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