弊社では以前から、「axe-auto-reporter」 という、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプトを GitHub で公開していました。

この度、このスクリプトを活用しつつウェブ UI を追加することで、ブラウザでアクセシビリティレポートを確認できるダッシュボードツール 「axe Auto Reporter Web」を新たに公開しました。

ダッシュボードではレポートのサマリーが確認できます。

axe Auto Reporter Web ダッシュボード スクリーンショット

さらに、それぞれの URL をクリックするとレポートの詳細が確認できます。

axe Auto Reporter Web レポートページ スクリーンショット

ダッシュボードはライトモード、ダークモードに対応しており、上記キャプチャはダークモード時のものです。

ダッシュボードを立ち上げ、初期設定として設定画面で、sitemap.xml の URL を指定するだけで、自動的にそこから最大 100 件 (デフォルト値 / 設定画面で変更可能) 分の URL を取得し、axe-core を使用したアクセシビリティテストを実施します。

すでにウェブサイトで sitemap.xml を公開している場合はウェブサイト側での対応は不要ですぐにアクセシビリティテストを開始できます。

あるいは、このツール専用にテスト対象 URL を選抜した sitemap.xml を用意することも可能です。

セットアップも比較的簡単ですので、ウェブサイトのアクセシビリティ品質を定期的にモニタリングしたい企業様などご利用いただけます。

axe-core を使用したアクセシビリティテストは、自動テストですので、ツールによるテストだけをもって正確なアクセシビリティ品質を判断することはできませんが、全体の傾向やエラーの増減などをモニタリングする用途で使用可能です。

詳しい使い方はリポジトリの README.md をご確認ください。


ウェブアクセシビリティ対応に取り組むにあたり、はじめの一歩、大まかな現状把握のためのツールとして「axe Auto Reporter Web」は自由にご利用いただけます。

その上で、より本格的な、アクセシビリティ専門家によるテスト、コンサルティングが必要だなとお考えの場合は、ぜひ弊社までご相談ください。