accessibility-testing

アクセシビリティテスト

目次

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

概要

アクセシビリティテストでは、スクリーンリーダー、キーボード操作、その他の支援技術を使用する人を含め、障害のある人がウェブアプリケーションを利用できることを確認します。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([]);
  });

// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装については、references/ ディレクトリを参照してください。

ガイド	内容
axe-core with Playwright	Playwright で axe-core を使用する
Keyboard Navigation Testing	キーボード操作のテスト
ARIA Testing	ARIA のテスト
Jest with jest-axe	jest-axe を使用した Jest
Cypress Accessibility Testing	Cypress によるアクセシビリティテスト
Python with Selenium and axe	Selenium と axe を使用した Python

ベストプラクティス

✅ 推奨事項

• 実際の支援技術を使ってテストする
• キーボードのみを使うユーザーも対象にする
• 色のコントラストをテストする
• セマンティック HTML を使用する
• テキストによる代替手段を提供する
• スクリーンリーダーを使ってテストする
• CI で自動テストを実行する
• WCAG 2.1 AA 規格に準拠する

❌ 避けるべきこと

• 自動テストだけに頼る（問題を検出できるのは約 30～40％です）
• 情報を伝える手段として色だけを使う
• キーボード操作のテストを省略する
• 動的コンテンツのフォーカス管理を忘れる
• インタラクティブな要素に div/span を使う
• display:none でフォーカス可能なコンテンツを隠す
• ARIA のベストプラクティスを無視する
• 手動テストを省略する