アクセシビリティテスト

目次

• 概要
• 使用場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

アクセシビリティテストは、スクリーンリーダー、キーボードナビゲーション、その他の支援技術を使用する障害のあるユーザーを含む、すべてのユーザーがウェブアプリケーションを使用できることを保証します。WCAG (Web Content Accessibility Guidelines) への準拠を検証し、アクセシビリティの障壁を特定します。

使用場面

• WCAG 2.1/2.2 準拠の検証
• キーボードナビゲーションのテスト
• スクリーンリーダー互換性の検証
• 色のコントラスト比のテスト
• ARIA 属性の検証
• フォームアクセシビリティのテスト
• フォーカス管理の確認
• 支援技術によるテスト

クイックスタート

最小限の動作例:

// tests/accessibility/homepage.a11y.test.ts
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test.describe("Homepage Accessibility", () => {
  test("should not have any automatically detectable WCAG A or AA violations", async ({
    page,
  }) => {
    await page.goto("/");

    const accessibilityScanResults = await new AxeBuilder({ page })
      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
      .analyze();

    expect(accessibilityScanResults.violations).toEqual([]);
  });

  test("navigation should be accessible", async ({ page }) => {
    await page.goto("/");

    const results = await new AxeBuilder({ page }).include("nav").analyze();

    expect(results.violations).toEqual([]);
  });

// ... (詳細な実装についてはリファレンスガイドを参照してください)

リファレンスガイド

references/ ディレクトリの詳細な実装:

ベストプラクティス

✅ 推奨事項

• 実際の支援技術でテストする
• キーボードのみのユーザーを含める
• 色のコントラストをテストする
• セマンティック HTML を使用する
• テキストの代替表現を提供する
• スクリーンリーダーでテストする
• CI で自動テストを実行する
• WCAG 2.1 AA 標準に従う

❌ 非推奨事項

• 自動テストのみに依存する (約 30～40% の問題しか検出できません)
• 情報伝達に色のみを使用する
• キーボードナビゲーションテストをスキップする
• 動的コンテンツのフォーカス管理を忘れる
• インタラクティブ要素に div/span を使用する
• display:none でフォーカス可能なコンテンツを非表示にする
• ARIA ベストプラクティスを無視する
• 手動テストをスキップする