@axe-core/puppeteer を使用して、指定した sitemap.xml 内の URL に対してアクセシビリティテストを自動的に実行、その結果をレポートとして表示するダッシュボードアプリです。
- Node.js 22.12.0 以降
- npm 10.x 以降
Tip
Linux 環境で実行する場合、Puppeteer が要求する Chromium 系ライブラリが不足してエラーになることがあります。必要に応じて事前にインストールしておいてください。
リポジトリを clone した後、ルートディレクトリに移動して npm install を実行します。
git clone https://github.com/burnworks/axe-auto-reporter-web.git
cd axe-auto-reporter-web
npm installターミナルで以下のコマンドを実行し、ブラウザで http://localhost:3000 を開きます。
npm run build
npm run preview -- --host 0.0.0.0 --port 3000初回起動時に data/ ディレクトリが作成され、必要な初期ファイルが作成されます。
設定画面（Setting）を開いてサイトマップの URL など必要な項目を入力して保存します。（設定を保存すると data/settings.json と data/url-list.txt が更新されます）
別のターミナルで以下のコマンドを実行し、初回アクセシビリティテストを実行します（CUI 画面に進捗が表示されますのでテストが終わるまでお待ちください）。
node script/scheduler.mjs --once初回テストが完了したらブラウザ画面に戻って再読み込みし、アクセシビリティレポートがダッシュボードに表示されているかを確認します。
初回レポートが生成された後は、以下のように node script/scheduler.mjs を（--once なしで）別のターミナルで実行し、常駐させておくと、設定画面で選択した「テスト頻度」設定に従って以降のレポートが自動で作成されます。
node script/scheduler.mjsあるいは、Windows のタスクスケジューラ、Mac の launchd などで、以下のコマンドを任意の間隔で自動実行することで代用もできます（この場合、設定画面の「テスト頻度」設定は使用されません）。
node script/scheduler.mjs --onceもし、スケジュール設定が難しい場合は、任意のタイミングで node script/scheduler.mjs --once を実行しても構いません。
スケジューラは毎回実行前に data/settings.json を読み込み、sitemap.xml の URL、タグ、クロールモード、対象ページ数（上限）、テスト頻度（daily / weekly / monthly）を参照します。生成されたレポートは src/pages/results/、スクリーンショットは data/screenshots/ に保存され、data/reports/index.json にインデックスされます。
Node.js が導入済みの Linux サーバで稼働させる場合、PM2 等を使用して、以下の2つのプロセスを常駐させてください（別途、ウェブサーバ等の設定は必要です）。
# インストール
git clone https://github.com/burnworks/axe-auto-reporter-web.git
cd axe-auto-reporter-web
cp .env.sample .env # 認証情報を設定
npm install
npm run build
# PM2 の導入
npm install -g pm2
# ダッシュボード本体の立ち上げ
pm2 start dist/server/entry.mjs --name axe-dashboard --interpreter node
# スケジューラの立ち上げ
pm2 start script/scheduler.mjs --name axe-scheduler --interpreter node
# 任意で PM2 の自動起動設定など
pm2 startup
pm2 save実際に試していないので正確なことは言えませんが、恐らく以下のような手順でデプロイできるのではないかと思います。
.gitignoreを編集、git addするなどして、src/pages/results/*,data/を追跡対象に- 「起動と初期設定」セクションに従い一度ローカル環境でダッシュボードを立ち上げ、初期設定を行い、
node script/scheduler.mjs --onceを実行して初回レポートを作成 - GitHub に push し、リポジトリの内容を Vercel にデプロイ（ドメインの設定含め基本設定を行う）
.envの内容を環境変数（Environment Variables）に設定- ダッシュボードにアクセスしてレポートが表示されることを確認
- GitHub Actions で任意のタイミングで
node script/scheduler.mjs --onceを実行し、指定のブランチにpushするように設定（USER_AUTHENTICATION=trueの場合は、GitHub Secrets に.envの内容を設定） - 指定ブランチへの
pushをトリガーに Vercel にデプロイ
以下の設定を行うと、ユーザー認証機能を有効にできます。
.env.sample を .env にリネームしてください。
作成した .env で USER_AUTHENTICATION=true （初期値）に設定すると、ユーザー認証機能が有効になり、ダッシュボードへのアクセスにはログインが必要になります。
未ログイン状態でダッシュボードにアクセスすると、ログインページにリダイレクトされますので、.env に設定したユーザー名とパスワードでログインしてください。ログイン画面の「ログイン状態を保存」にチェックを付けると 30 日間のセッションが発行されます。
なお、.env を作らない場合は USER_AUTHENTICATION=false として扱われます。
Important
発行されるクッキーは HTTPS を前提に Secure 属性付きで保存されます。公開サーバーで運用する際は、必ず HTTPS で接続可能な環境で稼働させてください。
.env.sample は以下の通りです。ユーザー認証機能を有効にする場合は、必ず以下の環境変数を事前に設定してください。
USER_AUTHENTICATION=true
ADMIN_USERNAME=please-change-your-username
ADMIN_PASSWORD=please-change-your-password
AUTH_SESSION_SECRET=please-change-this-secret-value-nowUSER_AUTHENTICATION：trueでユーザー認証を有効化、falseにすると認証なしで利用できます（falseの状態で第三者がアクセス可能な公開サーバで運用しないように注意してください）。ADMIN_USERNAME： ログインに使用するユーザー名を設定します。ADMIN_PASSWORD： ログインに使用するパスワードを設定します。推測されにくい強固なパスワードを指定してください。AUTH_SESSION_SECRET： セッションを署名するための秘密鍵です。32 文字以上のランダムな文字列を設定してください。
なお、設定済みの .env をリポジトリに含めたりしないようにしてください。
- ユーザー認証機能が無効の状態で、第三者がアクセスする公開サーバで実行するような利用方法はしないでください。
- テストの対象は
http://またはhttps://で始まる URL のみです。PDF など非 HTML コンテンツはブラウザ内ビューアでアクセスできてしまいますが、アクセシビリティ試験自体は正常に実行されません。 - テストの失敗などに対するダッシュボード上での通知・表示などは行われません。レポートが正常に生成されない場合などは
script/axe-auto-reporter.mjsの実行ログを確認してください。
ユーザー認証機能を追加して公開サーバでも運用できるようにしたい→ v1.1.0 でユーザー認証機能を実装（デフォルトは無効）- 現状、設定データなど保存に RDB を使用していないが、ユーザー認証機能追加時に各データを RDB に保存するようにしたい
- Docker で簡単に立ち上げられるようにしたい