Vercelのプレビューに対してpa11y-ciを実行してアクセシビリティについて自動テストする
pa11y-ciとは
pa11yとは、アクセシビリティを自動的にテストできるツールです。
こちらをCI上から実行しやすいようsitemapやURLのリストに対して実行できるようにしたものがpa11y-ciになります。
事前準備
Vercelの設定
Vercelのsettings → Deployment Protection → Vercel Authenticationをオフにする必要があります。
こちらを設定しないと作成されたVercelのプレビューを確認する際に認証が必要となるためpa11y-ciがデプロイしたアプリケーションをチェックできません。
sitemap.xmlの作成
pa11y-ciの実行対象として参照するためsitemap.xmlを作成します。
例えば、Next.js + AppRouterを利用する場合は以下のように実装します。
import { MetadataRoute } from "next";
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const baseURL = "https://pa11yci-vercel-action.vercel.app";
const lastModified = new Date();
const staticPaths = [
{
url: baseURL,
lastModified,
},
];
return [...staticPaths];
}
pa11y-ciの都合上sitemap indexファイルは利用できませんので注意してください。
こちらを利用してしまうとsitemap indexファイルに記載されている他のsitemap.xmlをテストしてしまうためです。
例えば、next-sitemapではデフォルトでsitemap indexファイルを作成します。
実装
workflow
name: pa11y
on:
issue_comment:
types: [edited]
jobs:
pa11y:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Get Preview URL
id: capture_preview_url
uses: aaimio/vercel-preview-url-action@v2.2.0
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Get Redirect URL
id: get_redirected_url
run: |
PREVIEW_URL="${{ steps.capture_preview_url.outputs.vercel_preview_url }}"
REDIRECTED_URL=$(curl -Ls -o /dev/null -w %{url_effective} "$PREVIEW_URL" | sed 's/\/$//')
echo "REDIRECTED_URL=$REDIRECTED_URL" >> "$GITHUB_OUTPUT"
- uses: actions/setup-node@v4
with:
node-version: "18"
cache: npm
- name: Install dependencies
run: npm install -g pa11y-ci
- name: pa11y-ci
env:
REDIRECTED_URL: ${{ steps.get_redirected_url.outputs.REDIRECTED_URL }}
REDIRECTED_SITEMAP: ${{ steps.get_redirected_url.outputs.REDIRECTED_URL }}${{'/sitemap.xml'}}
REPLACE_BASE_URL: "https://pa11yci-vercel-action.vercel.app"
run: |
pa11y-ci --config .pa11yci.json --sitemap $REDIRECTED_SITEMAP --sitemap-find $REPLACE_BASE_URL --sitemap-replace $REDIRECTED_URL
全体の流れとしてはaaimio/vercel-preview-url-actionを利用してVercelに自動デプロイしたURLを取得します。
こちらのURLはクエリパラメータがついています。
そのためVercelとGitHubActionsでフロントエンドのパフォーマンスを自動計測したい #Next.js - Qiitaを参考にリダイレクト先のURLを取得しています。
また、ここで取得できるURLは「/」で終わっているためsedを使って除去しています。
その後はpa11y-ciのインストール及び実行をしています。
pa11y-ciの実行について
pa11y-ci --config .pa11yci.json --sitemap $REDIRECTED_SITEMAP --sitemap-find $REPLACE_BASE_URL --sitemap-replace $REDIRECTED_URL
GitHub Actions上でpa11y-ciを上記のように実行しています。
各オプションについて簡単に説明をまとめます。
--configによってコンフィグファイルのパスを指定してます。
--sitemapによってプレビューのサイトマップの取得先を指定しています。
ただ、プレビューのサイトマップの内容としてプレビュー先ではなくプロダクション環境のURLが指定されています。
そのため--sitemap-findによってプロダクション環境のbaseURLを取得した後、--sitemap-replaceオプションによって置き換えを行っています。
pa11y-ciの設定
{
"defaults": {
"standard": "WCAG2AA",
"timeout": 100000,
"chromeLaunchConfig": {
"args": ["--no-sandbox"],
"executablePath": "/usr/bin/chromium"
}
}
}
pa11y-ciの設定ファイルの一例を載せます。
細かいオプションについてはREADME.mdのConfigrationを参照してください。
自分が試した限りではchromeLaunchConfigを設定していない場合に実行が失敗していたため設定が必要なはずです。
参考
実際に動作させたリポジトリは以下になります。
テストしているサイトはNext.jsを利用しています。
Discussion