開発者ツールでアクセシビリティを確保する

  • 2 分

さまざまなクライアントやビューで Web ページをテストすることは、さまざまなブラウザーでのテストと同様に重要です。 このテストは、すべてのシナリオでは実用的ではない可能性があり、ユーザーがブラウザーを使用していても、別の障がいがある可能性があります。 幸いなことに、開発者として使用して、ページのアクセシビリティを測定するツールがあります。

コントラスト チェッカー

色覚異常のある人は、色を区別できない場合や、互いに似た色を使用するのが困難な場合があります。 Web の標準組織である World Wide Web コンソーシアム (W3C) は、 カラー コントラストの評価システムを確立しました。

適切な色を選択して、すべての人がページにアクセスできるようにすることは、手動では難しい場合があります。 次のツールを使用して、適切な色を生成し、サイトをテストしてコンプライアンスを確保することができます。

灯台

Lighthouse は、Web サイトを分析するために Google が作成したツールです。 多くのブラウザーの開発者ツールに含まれており、とても人気があります。 Lighthouse では、ページの検索エンジンの最適化 (SEO)、読み込みのパフォーマンス、およびその他のベストプラクティスを調べることができます。 Lighthouse では、ページを分析し、現在のアクセシビリティのスコアを示すこともできます。

注

任意の自動化ツールと同様に、Lighthouse が提供するスコアを、ページのアクセシビリティを単に示すスコアとして依存することはできません。 しかし、問題を特定して修復するための出発点として適しています。

演習: ページの Lighthouse アクセシビリティ スコアを生成する

ブラウザーで Lighthouse をテストします。 次のスクリーンショットでは Edgeを使用していますが、Chrome や他の多くのブラウザーでも同じ手順を実行できます。

  1. ブラウザーを開き、メインの Microsoft の Web ページへ移動します。

  2. F12キーを選択して、開発者ツールを開きます。

  3. 上部にあるシェブロン (>>) アイコンを選択して、非表示タブの一覧を開きます。

    シェブロンが強調表示されている開発者ツールのスクリーンショット。

  4. リストから Lighthouse を選択します。

  5. [カテゴリ] で、[アクセシビリティ] 以外のすべての項目をオフにします。

  6. [デバイス] で、[デスクトップ] を選択します。

    [カテゴリ] でアクセシビリティのみが選択され、[デバイス] で [デスクトップ] が選択されている場合の Lighthouse のスクリーンショット。

  7. [Generate Report]\(レポートの生成\) を選択します。

  8. ページに関するスコアと関連情報が表示されます。

  9. 他のページをテストするには、Lighthouse で [Clear all]\(すべてクリア\) を選択し、別のページに移動して、[Generate Report]\(レポートの生成\) を選択します。

    Lighthouse の [URL] セクションのスクリーンショット。すべての項目をクリアするためのボタンが強調表示されています。

ここまでで、Lighthouse の使用方法と、ツールが提供できるユーザー補助情報について説明しました。