accessibility-testing

アクセシビリティテスト

統合版：マルチツールテスト（axe-core + pa11y + Lighthouse）、動画のアクセシビリティ、修正対応を含む包括的な WCAG 監査には、/a11y-ally を推奨します。このスキルは、基本的なアクセシビリティテストのパターンをすばやく確認するためのリファレンスカードを提供します。

ブラウザーエンジン

ブラウザー駆動の a11y チェックには、qe-browser フリートスキルを使用してください。vibium a11y-tree --json は視覚的なレンダリングなしでアクセシビリティツリー全体を返します。vibium eval --stdin を介して axe-core に渡し、ルールセットを適用します。.claude/skills/qe-browser/SKILL.md を参照してください。

<default_to_action> アクセシビリティをテストするとき、またはコンプライアンスを確保するときは、以下を実施してください。

1. POUR の原則を適用する：知覚可能、操作可能、理解可能、堅牢
2. キーボードのみでの操作（Tab、Enter、Escape）をテストする
3. スクリーンリーダー（VoiceOver、NVDA、JAWS）で検証する
4. 色のコントラストを確認する（テキストは 4.5:1、大きなテキストは 3:1）
5. axe-core で自動テストし、CI/CD パイプラインに統合する

アクセシビリティのクイックチェックリスト：

• すべての画像に alt テキストがある（装飾用画像は alt=""）
• すべてのフォームフィールドにラベルがある
• 色だけを唯一の判別手段にしない
• すべてのインタラクティブ要素でフォーカスが見える
• どこでもキーボード操作ができる

重要な成功要因：

• 自動テストで問題の 30〜50% を検出できる
• 実際の支援技術を使った手動テストが必要
• 障害のあるユーザーをテストに参加させる </default_to_action>

クイックリファレンスカード

使用する場面

• 法的コンプライアンス（ADA、Section 508、EU 指令）
• 新機能の開発
• リリース前の検証
• アクセシビリティ監査

WCAG 2.2 の適合レベル

レベル	要件	目標
A	基本的なアクセシビリティ	法的な最低基準
AA	標準（大半の組織）	業界標準
AAA	強化されたアクセシビリティ	特殊なサイト

POUR の原則

原則	意味	主なテスト
知覚可能	コンテンツを知覚できる	Alt テキスト、コントラスト、キャプション
操作可能	UI を操作できる	キーボード、発作の防止、ナビゲーション
理解可能	内容を理解できる	明確なラベル、予測可能な動作、エラー
堅牢	支援技術で動作する	有効な HTML、ARIA

色のコントラスト要件

コンテンツ	AA 比率	AAA 比率
通常のテキスト	4.5:1	7:1
大きなテキスト（18pt 以上）	3:1	4.5:1
UI コンポーネント	3:1	-

---

キーボード操作テスト

// Test all interactive elements reachable via keyboard
test('all interactive elements keyboard accessible', async ({ page }) => {
  await page.goto('/');

  const focusableElements = await page.$$('button, a, input, select, textarea, [tabindex]');

  for (const element of focusableElements) {
    await element.focus();
    const isFocused = await element.evaluate(el => document.activeElement === el);
    expect(isFocused).toBe(true);
  }
});

// Verify visible focus indicator
test('focus indicator visible', async ({ page }) => {
  await page.goto('/');
  await page.keyboard.press('Tab');

  const focusedElement = await page.locator(':focus');
  const outline = await focusedElement.evaluate(el =>
    getComputedStyle(el).outline
  );

  expect(outline).not.toBe('none');
});

---

axe-core による自動テスト

推奨：a11y-ally AQE スキルを使用（qe-browser + Vibium）

新規作業では、a11y-ally スキルを使用してください。qe-browser（Vibium WebDriver BiDi）と axe-core、pa11y、Lighthouse を組み合わせ、修正ガイダンスを含む WCAG タグ付き JSON レポートを生成します。300MB の Playwright のインストールを避けられ、すでに AQE フリートに組み込まれています。

# Runs axe-core + pa11y + Lighthouse via qe-browser (Vibium) engine
aqe skill run a11y-ally -- --url https://example.com --wcag AA

フォールバック：Playwright + @axe-core/playwright

既存の Playwright スイートがあり、2 つ目のブラウザーランナーを導入したくない場合や、現時点で Vibium の Chrome 専用 BiDi バックエンドではカバーできない Firefox／Safari のテストが必要な場合は、この方法を引き続き使用してください。

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('page has no accessibility violations', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();

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

// CI/CD integration
test('checkout flow accessible', async ({ page }) => {
  await page.goto('/checkout');

  const results = await new AxeBuilder({ page })
    .include('#checkout-form')
    .disableRules(['color-contrast']) // Fix in next sprint
    .analyze();

  expect(results.violations.filter(v =>
    v.impact === 'critical' || v.impact === 'serious'
  )).toHaveLength(0);
});

---

スクリーンリーダーテストのチェックリスト

## VoiceOver (macOS) Testing
- [ ] Page title announced on load
- [ ] Headings hierarchy correct (h1 → h2 → h3)
- [ ] Landmarks present (nav, main, footer)
- [ ] Images have descriptive alt text
- [ ] Form labels read correctly
- [ ] Error messages announced
- [ ] Dynamic content updates announced (aria-live)

---

エージェント主導のアクセシビリティ

// Comprehensive a11y validation
await Task("Accessibility Validation", {
  url: 'https://example.com/checkout',
  standard: 'WCAG2.2',
  level: 'AA',
  checks: ['keyboard', 'screen-reader', 'color-contrast'],
  includeScreenReaderSimulation: true
}, "qe-visual-tester");

// Fleet coordination for comprehensive testing
const a11yFleet = await FleetManager.coordinate({
  strategy: 'comprehensive-accessibility',
  agents: [
    'qe-visual-tester',     // Visual & keyboard checks
    'qe-test-generator',    // Generate a11y tests
    'qe-quality-gate'       // Enforce compliance
  ],
  topology: 'parallel'
});

---

エージェント連携のヒント

メモリ名前空間

aqe/accessibility/
├── wcag-results/*       - WCAG audit results
├── screen-reader/*      - Screen reader test logs
├── remediation/*        - Fix recommendations
└── compliance/*         - Compliance reports

フリート連携

const a11yFleet = await FleetManager.coordinate({
  strategy: 'accessibility-testing',
  agents: [
    'qe-visual-tester',   // axe-core, keyboard, focus
    'qe-test-generator',  // Generate a11y test cases
    'qe-quality-gate'     // Block non-compliant builds
  ],
  topology: 'parallel'
});

---

関連スキル

• visual-testing-advanced - 視覚的な a11y チェック
• mobile-testing - モバイルの a11y（VoiceOver、TalkBack）
• compliance-testing - 法的コンプライアンス

---

覚えておくこと

10億人に障害があります。アクセシビリティに配慮されていないソフトウェアは、人類の15％を排除します。 法的要件：ADA、Section 508、EU Directive 2016/2102。購買力は13兆ドルです。訴訟件数は250％以上増加しています。

自動テストで検出できる問題は全体の30〜50％にすぎません。 手動でのキーボードテスト、スクリーンリーダーのテスト、障害のある方に実際に使ってもらうテストと組み合わせてください。

エージェントの活用： エージェントで、WCAG 2.2 への準拠チェック、スクリーンリーダーのシミュレーション、フォーカス管理の検証を自動化できます。CI/CD でエージェントを活用してアクセシビリティ基準を徹底し、本番環境へのリリース前に違反を検出しましょう。