axe DevToolsとLighthouseでスキャンする

監査を始めるために特別な環境を用意する必要はありません。axe DevToolsとLighthouseはどちらもChrome内で動作し、現在表示しているページをスキャンできます。

axe DevTools拡張機能は、ブラウザーの開発者ツールにタブを追加します。1回クリックするだけでaxe-coreエンジンが実行され、ページ上のアクセシビリティ上の問題が一覧表示されます。

各検出結果には、問題のあるルール、該当する正確な要素、影響度、修正方法を説明するガイドへのリンクが示されます。推測する必要はありません。

axe DevToolsでは、問題がある要素をページ上でハイライトできます。どのボタンや画像が警告の原因になったのかが、すぐに分かります。

axeは各問題に、影響度としてminor、moderate、serious、criticalのいずれかを付けます。まずcriticalとseriousから修正し、大きな障壁を優先して取り除きます。

LighthouseはChrome DevToolsに組み込まれています。アクセシビリティのカテゴリでも内部でaxe-coreを実行し、100点満点の単一スコアを表示します。

Lighthouseパネルを開き、Accessibilityにチェックを入れて、Analyze page loadをクリックします。数秒でスコアと、グループ化された失敗監査の一覧が表示されます。

Lighthouseで100点を取るのは心強いことですが、自動化できるチェックの結果しか反映されません。完全なアクセシビリティの証明ではなく、最低限の基準として扱います。

ブラウザーの外からLighthouseを実行することもできます。npmでインストールし、任意のURLを指定すれば、共有可能なレポートを生成できます。

axe DevToolsはより詳しい情報とベストプラクティスのルールを提供し、Lighthouseは複数のカテゴリを横断した簡単なスコアを提供します。どちらもaxe-coreエンジンを共有しているため、結果が一致することも多くあります。

リリース前だけでなく、開発中にも簡単なスキャンを実行してください。ラベルの不足を今見つけるほうが、後から原因をたどるよりもはるかに低コストです。

この2つのブラウザツールに共通する点を思い出してください。

axe DevToolsは詳細で修正可能な指摘を示し、Lighthouseはすばやくスコアを算出します。どちらもブラウザ上で動作し、axe-coreを実行するため、早い段階で簡単にスキャンできます。🔍