Kayce Basques
Sofia Emelianova
このページでは、Chrome DevTools のユーザー補助機能について詳しく説明します。本コースは、次のようなウェブ デベロッパーを対象としています。
- DevTools の基本的な操作（開く方法など）を理解している。
- ユーザー補助の原則とベスト プラクティスに精通している。
このリファレンスの目的は、ページのユーザー補助機能の確認に役立つ、DevTools で利用可能なすべてのツールを把握することです。
スクリーン リーダーなどの支援技術を使用して DevTools を操作する方法については、支援技術を使用した Chrome DevTools の操作をご覧ください。
アクセシビリティに配慮したウェブサイトを開発する方法については、ユーザー補助について学ぶをご覧ください。
Chrome DevTools のユーザー補助機能の概要
このセクションでは、DevTools が全体的なユーザー補助ツールキットにどのように適合しているかについて説明します。
ページがアクセス可能かどうかを判断する際には、次の 2 つの一般的な質問を念頭に置く必要があります。
- キーボードやスクリーン リーダーでページを移動できますか？
- ページの要素はスクリーン リーダー向けに正しくマークアップされていますか？
一般的に、DevTools は質問 2 に関連するエラーの修正に役立ちます。これらのエラーは自動的に検出しやすいためです。質問 1 も同様に重要ですが、残念ながら DevTools では解決できません。質問 1 に関連するエラーを見つける唯一の方法は、キーボードまたはスクリーン リーダーでページを実際に使用してみることです。詳しくは、ユーザー補助機能の審査を行う方法をご覧ください。
ページのユーザー補助機能を監査する
一般に、[Lighthouse] パネルのユーザー補助チェックを使用して、次の点を確認します。
- ページがスクリーン リーダー向けに適切にマークアップされている。
- ページ上のテキスト要素のコントラスト比が十分である。ウェブサイトの読みやすさを高めるもご覧ください。
ページを監査するには:
- 監査する URL に移動します。
DevTools で [Lighthouse] パネルをクリックします。DevTools にさまざまな構成オプションが表示されます。