Claude Codeでフロントエンドのアクセシビリティ監査を自動化する — axe-coreとプルリクのコメント連携で運用に乗せる

# 必要パッケージのインストール
npm install -D @axe-core/playwright playwright @playwright/test
npx playwright install chromium

// scripts/a11y-audit.mjs
import { chromium } from 'playwright';
import AxeBuilder from '@axe-core/playwright';
import { writeFileSync } from 'node:fs';
 
const targets = process.argv.slice(2);
if (targets.length === 0) {
  console.error('Usage: node scripts/a11y-audit.mjs <url> [<url> ...]');
  process.exit(1);
}
 
const browser = await chromium.launch();
const page = await browser.newPage();
const results = [];
 
for (const url of targets) {
  await page.goto(url, { waitUntil: 'networkidle' });
  const r = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa']) // まずはAA基準まで
    .analyze();
  results.push({ url, violations: r.violations });
}
 
await browser.close();
writeFileSync('a11y-report.json', JSON.stringify(results, null, 2));
console.log(`Found ${results.reduce((n, r) => n + r.violations.length, 0)} violations across ${results.length} pages.`);

# .claude/skills/a11y-audit/SKILL.md
---
name: a11y-audit
description: "指定URLにaxe-coreでアクセシビリティ監査を実行し、違反を重要度順に要約する。トリガー: アクセシビリティ, a11y, 監査"
---
 
# 使い方
 
1. `npm run dev` が動いていることを確認する
2. `node scripts/a11y-audit.mjs http://localhost:3000` を実行する
3. 生成された `a11y-report.json` から違反を critical / serious / moderate / minor に仕分ける
4. critical と serious を最優先にし、各違反について「該当セレクタ」「WCAG項目」「修正方針」を1つずつ提示する
5. PR本文に貼れるMarkdownブロックとして整形する

// .claude/settings.json
{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash(git commit*)",
        "command": "node scripts/a11y-audit.mjs http://localhost:3000 || true",
        "description": "コミット前にa11y監査を実行(失敗してもコミット自体は止めない)"
      }
    ]
  }
}

# .github/workflows/a11y.yml
name: A11y Audit
on:
  pull_request:
    branches: [main]
 
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps chromium
      - run: npm run build && npm run start &
      - run: sleep 5 && node scripts/a11y-audit.mjs http://localhost:3000
      - name: Comment summary on PR
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const data = JSON.parse(fs.readFileSync('a11y-report.json', 'utf8'));
            const counts = data.flatMap(p => p.violations).reduce((acc, v) => {
              acc[v.impact] = (acc[v.impact] || 0) + 1;
              return acc;
            }, {});
            const body = [
              '## アクセシビリティ監査の結果',
              `- critical: ${counts.critical || 0}`,
              `- serious: ${counts.serious || 0}`,
              `- moderate: ${counts.moderate || 0}`,
              `- minor: ${counts.minor || 0}`,
              '',
              counts.critical || counts.serious
                ? '⚠️ critical / serious が残っています。マージ前に対応をお願いします。'
                : '✅ critical / serious レベルの違反はありません。',
            ].join('\n');
            await github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body
            });