qe-accessibility-testing

アクセシビリティテスト

<default_to_action> アクセシビリティをテストする場合、または準拠を確認する場合：

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

A11y クイックチェックリスト：

• すべての画像に代替テキストがある（装飾目的の場合は alt=""）
• すべてのフォームフィールドにラベルがある
• 色だけを唯一の識別手段にしない
• すべてのインタラクティブ要素でフォーカスが見える
• キーボードナビゲーションが全体を通じて機能する

重要な成功要因：

• 自動テストで問題の 30～50％を検出できます
• 実際の支援技術を使った手動テストが必要です
• テストに障害のあるユーザーを含めます </default_to_action>

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

使用する場面

• 法令への準拠（ADA、Section 508、EU 指令）
• 新機能の開発
• リリース前の検証
• アクセシビリティ監査

WCAG 2.2 の適合レベル

レベル	要件	目標
A	基本的なアクセシビリティ	法的な最低基準
AA	標準（ほとんどの組織）	業界標準
AAA	強化	専門分野向けサイト

POUR の原則

原則	意味	主なテスト
知覚可能	コンテンツを知覚できる	代替テキスト、コントラスト、字幕
操作可能	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 による自動テスト

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 指令 2016/2102。13 兆ドルの購買力。訴訟は 250％以上増加しています。

自動テストで検出できる問題は 30～50％にすぎません。 手動でのキーボードテスト、スクリーンリーダーテスト、および障害のある人々による実ユーザーテストを組み合わせてください。

エージェントを活用する場合： エージェントは WCAG 2.2 の準拠チェック、スクリーンリーダーのシミュレーション、フォーカス管理の検証を自動化します。CI/CD でアクセシビリティ標準を適用し、本番環境への反映前に違反を検出するためにエージェントを活用してください。