「axe-auto-reporter」 という （名前に全くひねりがない）、@axe-core/puppeteer を使用して、テキストファイルで作成した URL リストに対して自動的にアクセシビリティテストを実行し、その結果を HTML ファイルとして保存するスクリプトを GitHub で公開しました。
所謂、黒い画面 （CLI） で操作しますがテストしたい URL のリストをテキストファイルで作って、あとはコマンド 1つ実行するだけなので、多分ほとんどの人にとって難しくないと思います。
同じようなもの作ってる人は他にもいると思いますが、自分の会社の業務とかで使うためには人が作ったものより、自前で作った方が色々とやりやすいってことで、何年か前に作って運用してたのを今回、全面的に書き直したので、いい機会だからということで公開することにした次第。
詳しいことは 「axe-auto-reporter/README.md」 を読んでもらえればわかると思います。Node.js 環境がある前提なので、もしない人は先にそっちをインストールするとかしてください。
HTML レポートのサンプル
axe を開発している Deque 社が公開しているサンプルサイト （意図的にアクセシビリティ上の問題が出るように作られたサイト） に対して axe-auto-reporter を実行し、生成した HTML レポートの例です。
HTML レポートのテンプレートはある程度いじりやすくしてありますので、わかる人は自分が使いやすいデザインに作り直してもよいかもしれません。
現状の課題とか今後とか
元々が自分の仕事で個人的に使えるように作っているものなので、色々といたらない点があると思いますし、そこまで頑張って開発する程のものではないんですが、一応、こういうことも考えてますというメモ。
- axe core のテスト結果 （JSON） にはかなりの量の情報が入ってるんですが、現状で HTML レポートの方には
results.violationsのデータしか使っていません。とりあえず問題のある部分がざっくり把握できればいいかなということでそうしてあります。 - HTML ファイルと同時に、テスト結果全体を
.jsonファイルでも保存していますので、別途そのデータを加工するスクリプトなりを書いてもらえれば各自が欲しいレポートを作ることも可能だと思います。 - スクリーンショットが要らない場合に設定ファイルで簡単に ON / OFF できるようにした方がいいかなと思ってます。
urls.txtを作るのダルいって場合にはsitemap.xmlを読み込んで自動テストする機能も足したいんですけどsitemap.xmlがデカい （URL が 1,000 件とか 10,000 件とか） 時にどうしようかなとか思って躊躇してます。- レポートの先頭にサマリー的なものは付けたいかも （問題の影響度ごとに何件問題が発見されたのかなど）。
- インデックスページ （全テスト結果の一覧ページ） も本当は作りたいんですけど面倒くさそうすぎてやる気が出ないです。
- エラーハンドリングが適当かも。URL にアクセスできないとか、タイムアウトしたとかテストが失敗したときは、とりあえず 「失敗した」 っていうエラーメッセージだけ出して次に進む感じにしていますけど、もうちょっと細かくやった方がよい？
その他、実際に色んなサイトとか URL で試したわけじゃないので、もしかすると実行してみたらエラーが出て使えない、なんて場合があるかもしれません。気がついたら教えてください （教えてくださいというか Fork して直してください）。
2023年11月5日 追記
上記、今後の課題で書いた レポートの先頭にサマリー的なものは付けたいかも
については、v1.2.0 で対応してみました。簡単なフィルタリング機能も兼ねています。
