AIアクセシビリティツール — Webサイトのa11y自動改善

Webアクセシビリティ(a11y)は法的義務化が進み、2026年現在では多くの国でWCAG 2.1 AA準拠が求められている。AIツールを活用すれば、手作業では膨大な時間がかかるa11y対応を自動化できる。

主要AIアクセシビリティツール比較

ツール	種別	価格	自動修正	WCAG対応	特徴
axe DevTools	ブラウザ拡張+CI	無料〜$450/年	一部	AA/AAA	業界標準
Lighthouse	CLI/ブラウザ	無料(OSS)	なし	AA	Chrome内蔵
accessiBe	オーバーレイ	$49/月〜	あり	AA	ワンライン導入
AudioEye	SaaS+API	要見積	あり	AA/AAA	エンタープライズ
UserWay	ウィジェット	無料〜$49/月	あり	AA	多言語対応

axe-core — プログラマティックa11yテスト

axe-coreはDeque Systemsが開発するOSSのa11yテストエンジン。Playwright/Cypressとの統合でCI/CDに組み込める。

PlaywrightでのA11y自動テスト

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

test.describe('アクセシビリティテスト', () => {
  test('トップページがWCAG AA準拠', async ({ page }) => {
    await page.goto('https://example.com');

    const results = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa'])
      .exclude('.third-party-widget')
      .analyze();

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

  test('フォームページのa11y', async ({ page }) => {
    await page.goto('https://example.com/contact');

    const results = await new AxeBuilder({ page })
      .include('form')
      .withTags(['wcag2a', 'wcag2aa', 'best-practice'])
      .analyze();

    for (const violation of results.violations) {
      console.log(`[${violation.impact}] ${violation.id}: ${violation.description}`);
    }
    expect(results.violations).toEqual([]);
  });
});

CI/CDへの統合

# .github/workflows/a11y.yml
name: Accessibility Tests
on:
  pull_request:
    paths: ['src/**/*.tsx', 'src/**/*.css']

jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm run build
      - run: npm run start &
      - run: npx wait-on http://localhost:3000
      - run: npx playwright test --project=a11y

AIによるalt属性の自動生成

画像のalt属性は視覚障害者のための重要な情報源だが、手動で全画像に適切なaltを書くのは困難。AIの画像認識を活用すれば自動生成できる。

import anthropic
from pathlib import Path
import base64

client = anthropic.Anthropic()

def generate_alt_text(image_path: str) -> str:
    """AIで画像のalt属性テキストを生成"""
    image_data = base64.standard_b64encode(
        Path(image_path).read_bytes()
    ).decode("utf-8")
    media_type = "image/png" if image_path.endswith(".png") else "image/jpeg"

    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=200,
        messages=[{
            "role": "user",
            "content": [
                {"type": "image", "source": {"type": "base64", "media_type": media_type, "data": image_data}},
                {"type": "text", "text": "この画像の内容を、Webサイトのalt属性として適切な日本語で簡潔に説明してください。50文字以内で。"}
            ],
        }],
    )
    return response.content[0].text

色コントラスト自動チェック

WCAG 2.1ではテキストと背景のコントラスト比4.5:1以上(AA)が必須。

// contrast-checker.js
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function contrastRatio(hex1, hex2) {
  const parse = h => [
    parseInt(h.slice(1, 3), 16),
    parseInt(h.slice(3, 5), 16),
    parseInt(h.slice(5, 7), 16)
  ];
  const l1 = luminance(...parse(hex1));
  const l2 = luminance(...parse(hex2));
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

const pairs = [
  { text: '#666666', bg: '#ffffff', label: 'グレー on 白' },
  { text: '#0066cc', bg: '#ffffff', label: 'リンク色 on 白' },
  { text: '#ffffff', bg: '#ff6600', label: '白 on オレンジ' },
];
pairs.forEach(({ text, bg, label }) => {
  const ratio = contrastRatio(text, bg);
  const pass = ratio >= 4.5 ? 'PASS' : 'FAIL';
  console.log(`${pass} ${label}: ${ratio.toFixed(2)}:1`);
});

a11y改善の定量効果

実サイト（50ページ）でAI a11yツール導入前後を比較した。

指標	導入前	導入後	改善
Lighthouse a11yスコア	62	96	+34pt
WCAG違反数	142件	3件	-98%
alt属性カバー率	35%	100%	+65pt
キーボード操作対応率	70%	98%	+28pt
対応工数	80時間(見積)	12時間	-85%

実践チェックリスト

1. Lighthouseで現状スコアを計測 — まず基準値を把握
2. axe-coreをCI/CDに統合 — 新規コードの違反を防止
3. AIでalt属性を一括生成 — 既存画像の対応を自動化
4. 色コントラストチェッカーを導入 — デザイントークンレベルで検証
5. キーボードナビゲーションテスト — Tab操作で全機能にアクセス可能か確認

関連記事

• AIの「目」を作る — ビジュアルインスペクター
• AI開発ツールエコシステムマップ 2026
• Playwrightで自動テスト構築