a11y-testing

アクセシビリティテスト

axe-core を使用した、WCAG 2.2 準拠の自動アクセシビリティテストです。問題の 30～50％を自動的に検出します。

概要

• CI/CD アクセシビリティゲートの実装
• リリース前の準拠状況監査
• 単体テストでのコンポーネントのアクセシビリティテスト
• E2E テストでのページ単位のアクセシビリティ検証
• キーボードナビゲーションが正しく動作することの確認

クイックリファレンス

jest-axe による単体テスト

// jest.setup.ts
import { toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

// Button.test.tsx
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

it('has no a11y violations', async () => {
  const { container } = render(<Button>Click me</Button>);
  expect(await axe(container)).toHaveNoViolations();
});

Playwright + axe-core による E2E テスト

// e2e/accessibility.spec.ts
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("page has no a11y violations", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag22aa"])
    .analyze();
  expect(results.violations).toEqual([]);
});

test("modal state has no violations", async ({ page }) => {
  await page.goto("/");
  await page.click('[data-testid="open-modal"]');
  await page.waitForSelector('[role="dialog"]');

  const results = await new AxeBuilder({ page })
    .include('[role="dialog"]')
    .withTags(["wcag2a", "wcag2aa"])
    .analyze();
  expect(results.violations).toEqual([]);
});

CI/CD との統合

# .github/workflows/accessibility.yml
name: Accessibility
on: [pull_request]

jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20", cache: "npm" }
      - run: npm ci
      - run: npm run test:a11y
      - run: npm run build
      - run: npx playwright install --with-deps chromium
      - run: npm start & npx wait-on http://localhost:3000
      - run: npx playwright test e2e/accessibility

主な決定事項

決定事項	選択肢	理由
テストランナー	jest-axe + Playwright	単体テスト + E2E の網羅性
WCAG レベル	AA (wcag2aa)	業界標準、法令遵守
CI ゲート	違反があればブロック	リグレッションの防止
ブラウザーマトリックス	Chromium + Firefox	クロスブラウザーの網羅性
除外対象	サードパーティーウィジェットのみ	見落としを最小限に抑える
タグ	wcag2a, wcag2aa, wcag22aa	WCAG 2.2 AA を完全に網羅
状態のテスト	すべてのインタラクティブな状態をテスト	モーダル、エラー、読み込み

アンチパターン（禁止）

// BAD: Disabling rules globally
const results = await axe(container, {
  rules: { 'color-contrast': { enabled: false } }  // NEVER disable rules
});

// BAD: Excluding too much
new AxeBuilder({ page })
  .exclude('body')  // Defeats the purpose
  .analyze();

// BAD: Only testing happy path
it('form is accessible', async () => {
  const { container } = render(<Form />);
  expect(await axe(container)).toHaveNoViolations();
  // Missing: error state, loading state, disabled state
});

// BAD: No CI enforcement
// Accessibility tests exist but don't block PRs

// BAD: Manual-only testing
// Relying solely on human review - catches issues too late

関連スキル

• e2e-testing - Playwright E2E テストのパターン
• unit-testing - Jest 単体テストの基礎
• design-system-starter - アクセシブルなコンポーネントの基盤

機能の詳細

jest-axe-testing

キーワード： jest, axe, 単体テスト, コンポーネントテスト, react-testing-library 解決する課題：

• コンポーネント単位のアクセシビリティ検証
• 開発時の迅速なフィードバック
• CI/CD の単体テストゲート
• コンポーネントのすべての状態（無効、エラー、読み込み）のテスト

playwright-axe-testing

キーワード： playwright, e2e, axe-core, ページスキャン, wcag, 統合 解決する課題：

• ページ全体のアクセシビリティ監査
• インタラクティブな状態（モーダル、メニュー、フォーム）のテスト
• 複数ブラウザーでのアクセシビリティ検証
• ページ単位での WCAG 準拠状況の検証

ci-a11y-gates

キーワード： ci, cd, github actions, アクセシビリティゲート, 自動化 解決する課題：

• アクセシビリティ違反のある PR のブロック
• リグレッションの自動防止
• 準拠状況のレポートと成果物
• デプロイパイプラインとの統合