以前、「axe-auto-reporter」 という （名前に全くひねりがない）、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存する、所謂、黒い画面 （CLI） で操作するためのスクリプトを GitHub で公開したんですが、このスクリプトをほぼそのまま利用して、ブラウザでレポートを確認できるダッシュボード的なツール 「axe Auto Reporter Web」 （こちらも名前に全くひねりがない） を作ってみました。
現在公開している v1.0.0 は、基本的にローカル環境で動作させる前提のツールなので、公開サーバでの利用はやめてほしいんですが （現状はユーザー認証とかアクセス制限の仕組みが一切ないので）、Node.js 環境さえあれば比較的簡単に指定した Web サイトの複数ページに対して自動的になアクセシビリティテストを実行し、それをレポート生成日別にブラウザから閲覧できるようになります。
実際のダッシュボードはこんな感じ。ライトモード、ダークモードに対応していますが、下のキャプチャはダークモード時。
ダッシュボードではレポートのサマリーが確認できます。
で、それぞれの URL をクリックするとレポートの詳細が確認できます。レポートの見た目などは、すべてベースとなっている 「axe-auto-reporter」 と同じです。
設定画面で、sitemap.xml の URL を指定するだけで、あとは自動的にそこから最大 100 件 （デフォルト値 / 設定画面で変更可能） 分の URL を取得し、axe-core を使用したアクセシビリティテストを実施します。
すでにある sitemap.xml を使用してもよいですし、このツール専用にテスト対象 URL を選抜した sitemap.xml を用意してもよいです。自社の公式サイトのアクセシビリティ品質を大雑把に知りたいみたいな方には便利なのではないかと思っております。
もちろん、自動テストなのでこれだけで正確なアクセシビリティ品質はわかりませんが、なんとなくエラーの傾向やら、「急にエラー増えたな......」 みたいな変化を追うにはいいんじゃないでしょうか。
詳しい使い方はリポジトリの README.md をご確認ください。
ちなみに、はじめの取っかかりとしてこのツールを使っていただき、より本格的にアクセシビリティ専門家によるテストやコンサルティングが必要だなとお考えの場合は、ぜひ弊社までご相談ください。弊社、創業より 10 年以上、アクセシビリティを主な専門分野にやらせていただいております。
