ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト
Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。
axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。
axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウェブページ群) を一括的に自動テストすることが可能です。ブラウザ自動操作ツールとしては「Selenium」がかねてから有名で、私も実際、Selenium と axe-core の組み合わせでアクセシビリティ自動テストを運用したことがありますが、最近では Google が開発した「Puppeteer」という自動操作ツール (Chromium をヘッドレスで動かすことができる Node.js ライブラリ) をよく耳にするようになり、Selenium よりも手軽に扱えそうな印象だったので、今回、Puppeteer と axe-core の組み合わせで、ウェブサイトのアクセシビリティ自動テストを実行するためのスクリプト「axe-test.js」を自作してみました。
要件は、以下のとおりです。
- ウェブサイト全体 (数百ページ規模) を axe で一括的に自動テストすること。
- テスト結果を、スプレッドシートで活用できるように .csv で出力すること。
- 日本語でテスト結果を表示すること。
テスト結果の出力イメージは、以下のような感じです。スプレッドシートにすることで、サイト全体のアクセシビリティ問題を俯瞰できるほか、一番上の見出し行でフィルターを設定することで、各ページに共通した問題を抽出するなど、効率的に改善につなげることができます。
「axe-test.js」は、GitHub リポジトリ「caztcha/axe-test」で公開しています。事前準備を含む使用方法については README.md に記載しております。ウェブサイト運用担当者など、Node.js やコマンドラインに不慣れな方でもお使いいただけるように書いてみましたので、お気軽に使ってみていただけますと幸いです。