AIでWCAG準拠をCIに組み込む実装ガイド

npm install --save-dev @axe-core/playwright @playwright/test lighthouse

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

const TARGET_PAGES = [
  { name: 'トップページ', path: '/' },
  { name: 'お問い合わせ', path: '/contact' },
  { name: 'ブログ一覧', path: '/blog' },
];

for (const { name, path } of TARGET_PAGES) {
  test(`WCAG 2.1 AA: ${name}`, async ({ page }) => {
    await page.goto(path);

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

    // 違反件数を出力（CI ログで確認可能）
    if (results.violations.length > 0) {
      console.log(`violations on ${name}:`);
      results.violations.forEach(v => {
        console.log(`  [${v.impact}] ${v.id}: ${v.description}`);
        v.nodes.forEach(n => console.log(`    → ${n.target}`));
      });
    }

    expect(results.violations).toHaveLength(0);
  });
}

# .github/workflows/accessibility.yml
name: Accessibility CI

on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]

jobs:
  axe-check:
    name: axe-core WCAG Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium

      - name: Build application
        run: npm run build

      - name: Start application (background)
        run: npm start &
        env:
          PORT: 3000

      - name: Wait for server
        run: npx wait-on http://localhost:3000 --timeout 30000

      - name: Run axe-core accessibility tests
        run: npx playwright test tests/a11y/
        env:
          BASE_URL: http://localhost:3000

      - name: Upload test results
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: a11y-test-results
          path: test-results/

  lighthouse-check:
    name: Lighthouse Accessibility Score Gate
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build application
        run: npm run build

      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          urls: |
            http://localhost:3000/
            http://localhost:3000/blog
          budgetPath: ./lighthouse-budget.json
          uploadArtifacts: true
          temporaryPublicStorage: true

  ai-suggestion:
    name: AI Violation Fix Suggestions
    needs: axe-check
    if: failure()
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Download test results
        uses: actions/download-artifact@v4
        with:
          name: a11y-test-results
          path: test-results/

      - name: Generate AI fix suggestions
        run: node scripts/ai-a11y-suggest.js
        env:
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

// lighthouse-budget.json
[
  {
    "path": "/*",
    "resourceSizes": [],
    "resourceCounts": [],
    "timings": [],
    "scores": [
      { "id": "accessibility", "minScore": 0.9 }
    ]
  }
]

// scripts/ai-a11y-suggest.js
const fs = require('fs');
const path = require('path');

async function generateFixSuggestions() {
  const resultsDir = 'test-results';
  const violations = [];

  // テスト結果からviolationを収集
  const files = fs.readdirSync(resultsDir)
    .filter(f => f.endsWith('.json'));

  for (const file of files) {
    const data = JSON.parse(
      fs.readFileSync(path.join(resultsDir, file), 'utf8')
    );
    if (data.violations) {
      violations.push(...data.violations);
    }
  }

  if (violations.length === 0) {
    console.log('No violations found.');
    return;
  }

  // OpenAI API に修正提案を依頼
  const prompt = buildPrompt(violations);
  const suggestion = await callOpenAI(prompt);

  // GitHub Actionsのサマリーに出力
  const summary = `## アクセシビリティ違反の修正提案\n\n${suggestion}`;
  fs.appendFileSync(
    process.env.GITHUB_STEP_SUMMARY || 'a11y-suggestions.md',
    summary
  );
}

function buildPrompt(violations) {
  const violationText = violations
    .map(v => `- [${v.impact}] ${v.id}: ${v.description}
    影響ノード: ${v.nodes.map(n => n.target.join(', ')).join('; ')}
    修正ヒント: ${v.nodes[0]?.failureSummary || 'N/A'}`)
    .join('\n');

  return `以下のWCAG違反を修正するHTMLコード例を提案してください。
各違反について、Before/Afterのコードスニペットを示してください。

${violationText}`;
}

async function callOpenAI(prompt) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages: [
        {
          role: 'system',
          content: 'あなたはWCAGアクセシビリティの専門家です。具体的なコード修正例を提供します。',
        },
        { role: 'user', content: prompt },
      ],
      max_tokens: 2000,
    }),
  });

  const data = await response.json();
  return data.choices[0]?.message?.content || 'AI提案の生成に失敗しました。';
}

generateFixSuggestions().catch(console.error);

[デザイン] → [コーディング] → [PR] → [ステージング] → [本番]
     ↓             ↓           ↓           ↓
コントラスト比   ユニットテスト  axe-core CI  Lighthouse   実ユーザー
チェック(Figma)  (axe-core)     YAML        スコアゲート  フィードバック

// tests/components/Button.test.js
import { axe, toHaveNoViolations } from 'jest-axe';
import { render } from '@testing-library/react';
import Button from './Button';

expect.extend(toHaveNoViolations);

test('Button has no axe violations', async () => {
  const { container } = render(<Button>送信</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

PR作成
  │
  ├── [axe-core] WCAG 2.1/2.2 AA違反チェック
  │       ↓ FAIL → AI修正提案を GITHUB_STEP_SUMMARY に出力
  │
  ├── [Lighthouse CI] アクセシビリティスコア ≥ 90 チェック
  │
  └── [コードレビュー] ARIAパターン・セマンティックHTMLのレビュー
          ↓ 全PASS
        マージ可能