アクセシビリティテストのためのPa11yとaxe

Pa11y と axe-core は、WCAG に準拠したアクセシビリティテストを自動化するオープンソースツールです。どちらもページを解析し、DOM に対してルールを実行して、違反を報告します。アクセシビリティの問題の大部分を自動的に検出し、残りについては手動テストを行ってください。

axe-core は、Chrome DevTools、Lighthouse、Jest、Cypress、Playwright など、多くのツールでアクセシビリティ監査を支える JavaScript ライブラリです。幅広いルールをカバーし、誤検出率も低いことから、自動アクセシビリティテストのデファクトスタンダードになっています。

axe DevTools ブラウザー拡張機能（Chrome、Firefox、Edge）を使うと、DevTools に「Accessibility」タブが追加されます。「Scan all pages」をクリックすると、影響を受ける要素、重大度、修正方法の説明とともに、すべての違反が一覧表示されます。開発中の単発監査に適しています。

Pa11y は Node.js の CLI です。npx pa11y https://example.com で URL を監査できます。問題の一覧がターミナルに出力されます。簡単な監査、シェルスクリプト、または軽量な CI 統合に使用してください。

axe-core と Playwright を組み合わせて、エンドツーエンドのアクセシビリティテストを実行できます。const results = await new AxeBuilder({ page }).analyze() を使い、results.violations.length === 0 をアサートしてください。これにより、リグレッションが本番環境に到達する前に検出できます。

jest-axe は、Jest のテストでレンダリングされたコンポーネントに対して axe を実行します。React Testing Library でコンポーネントをレンダリングし、コンテナを axe に渡します。expect(await axe(container)).toHaveNoViolations() を使えば、各コンポーネントテストにアクセシビリティチェックを含められます。

どちらのツールでも、プロジェクトごとにルールを無効化または変更できます。意図したデザイン上の判断と矛盾するルールを無効にしたり、特に重要なルールの厳格さを高めたりできます。無効にしたルールには、理由を説明するコメントを必ず添えてください。これは将来の開発者に必要な背景情報になります。

自動化ツールで検出できる WCAG の問題は約30～40％です。残りの問題（意味のあるフォーカス順序、読みやすい alt テキスト、意味論的に適切な見出し階層、実際の UI の動作を反映した ARIA の使用）には人間によるレビューが必要です。アクセシビリティには自動化が不可欠ですが、それだけでは不十分です。

Windows では NVDA、Mac では VoiceOver、エンタープライズ向けには JAWS を使ってテストしてください。実際のスクリーンリーダーでテストすると、自動化では検出できない問題が明らかになります。たとえば、分かりにくい読み上げ、壊れたランドマーク、論理的でないフォーカス順序などです。各主要スクリーンリーダーでリリースごとに1回テストすることが、妥当な最低基準です。

最も価値のあるアクセシビリティ検証は、障害のあるユーザーが実際の製品を使って行うものです。アクセシビリティコンサルティング会社、大学の障害学生支援サービス、UserTesting.com のようなテストプラットフォームを通じて参加者を募集してください。実際の利用者からのフィードバックにより、自動化ツールでは表面化しない問題を検出できます。

アクセシビリティのリグレッション（新たな違反）があった場合は PR をブロックしますが、既存の違反（現在のベースライン）ではブロックしないようにします。これにより、リリースを妨げずに基準を引き上げ続けられます。全体的なアクセシビリティの健全性を示す先行指標として、違反の総数を時系列で追跡してください。

複数のツールを使用してください。包括的な自動チェックには axe、別の観点からの確認には Pa11y、定性的な不足を補うには手動のスクリーンリーダーテストを使います。ツール間の重複は少ないため、組み合わせることで、単一のツールでは検出できないより多くの問題をカバーできます。

axe や Pa11y のような自動化ツールで、WCAG のアクセシビリティ問題を確実に検出できるのは何パーセントでしょうか。

ほとんどのアクセシビリティ監査は axe-core によって支えられています。ブラウザー拡張機能は単発のチェックに、jest-axe と Playwright の統合は継続的なテストに適しています。Pa11y は補完的な CLI です。自動化で検出できる問題は約30～40％なので、手動のスクリーンリーダーテスト（NVDA、VoiceOver）と、障害のあるユーザーによる実際のテストを組み合わせて、十分なカバレッジを確保してください。CI では新たなリグレッションをブロックし、既存のベースライン違反ではブロックしないようにします。