Claude CodeでWCAG 2.2のターゲットサイズとフォーカス隠れをPlaywrightで測る

// tests/a11y/wcag22/target-size.spec.ts
import { test, expect } from '@playwright/test';
import { mkdirSync, writeFileSync } from 'node:fs';
 
const PAGES = ['/', '/pricing', '/login'];
 
for (const path of PAGES) {
  test(`2.5.8 target size: ${path}`, async ({ page }) => {
    await page.goto(path);
    await page.getByRole('main').waitFor();
 
    const result = await page.evaluate(() => {
      const SELECTOR = [
        'a[href]', 'button', 'input:not([type=hidden])', 'select', 'textarea',
        'summary', '[role=button]', '[role=link]', '[role=checkbox]',
        '[role=tab]', '[role=menuitem]', '[tabindex]:not([tabindex="-1"])',
      ].join(',');
      const MIN = 24;
 
      const name = (el: Element) => {
        const id = el.id ? `#${el.id}` : '';
        const cls = typeof el.className === 'string' && el.className.trim()
          ? '.' + el.className.trim().split(/\s+/).slice(0, 2).join('.')
          : '';
        return el.tagName.toLowerCase() + id + cls;
      };
 
      const items = [...document.querySelectorAll(SELECTOR)].flatMap((el) => {
        const r = el.getBoundingClientRect();
        const cs = getComputedStyle(el);
        if (r.width === 0 || r.height === 0 || cs.visibility === 'hidden') return [];
        const hasSiblingText = [...(el.parentNode?.childNodes ?? [])]
          .some((n) => n.nodeType === 3 && (n.textContent ?? '').trim() !== '');
        return [{ el, r, sel: name(el), inline: cs.display === 'inline' && hasSiblingText }];
      });
 
      const small = (i: (typeof items)[number]) => i.r.width < MIN || i.r.height < MIN;
      const center = (i: (typeof items)[number]) => ({
        x: i.r.x + i.r.width / 2,
        y: i.r.y + i.r.height / 2,
      });
 
      const failures: unknown[] = [];
      const inlineReview: unknown[] = [];
      let passedBySpacing = 0;
 
      for (const s of items.filter(small)) {
        const c = center(s);
        const crowdedBy = items
          .filter((o) => o.el !== s.el && !o.el.contains(s.el) && !s.el.contains(o.el))
          .filter((o) => {
            if (small(o)) {
              const oc = center(o);
              return Math.hypot(c.x - oc.x, c.y - oc.y) < MIN;
            }
            const dx = Math.max(o.r.left - c.x, 0, c.x - o.r.right);
            const dy = Math.max(o.r.top - c.y, 0, c.y - o.r.bottom);
            return Math.hypot(dx, dy) < MIN / 2;
          })
          .map((o) => o.sel);
 
        const row = {
          sel: s.sel,
          size: `${s.r.width.toFixed(1)}x${s.r.height.toFixed(1)}`,
          crowdedBy: crowdedBy.slice(0, 3),
        };
        if (crowdedBy.length === 0) passedBySpacing++;
        else if (s.inline) inlineReview.push(row);
        else failures.push(row);
      }
      return { total: items.length, passedBySpacing, failures, inlineReview };
    });
 
    mkdirSync('a11y-report', { recursive: true });
    writeFileSync(
      `a11y-report/target-size-${path.replace(/\W/g, '_')}.json`,
      JSON.stringify(result, null, 2),
    );
    expect(result.failures, '24px未満で、間隔の例外も成り立たない対象').toEqual([]);
  });
}

{
  "total": 41,
  "passedBySpacing": 3,
  "failures": [
    { "sel": "button.icon-close", "size": "16.0x16.0", "crowdedBy": ["button.icon-edit"] }
  ],
  "inlineReview": []
}

// tests/a11y/wcag22/focus-not-obscured.spec.ts
import { test, expect } from '@playwright/test';
import { mkdirSync, writeFileSync } from 'node:fs';
 
const PAGES = ['/', '/pricing', '/login'];
const VIEWPORTS = [
  { name: 'desktop', width: 1280, height: 720 },
  { name: 'mobile', width: 390, height: 844 },
];
 
for (const vp of VIEWPORTS) {
  for (const path of PAGES) {
    test(`2.4.11 focus not obscured: ${vp.name} ${path}`, async ({ page }) => {
      await page.setViewportSize({ width: vp.width, height: vp.height });
      await page.goto(path);
      await page.getByRole('main').waitFor();
      await page.evaluate(() => { (window as any).__seen = new Set<Element>(); });
 
      const hidden: unknown[] = [];
      const partial: unknown[] = [];
 
      for (let i = 0; i < 300; i++) {
        await page.keyboard.press('Tab');
        // スクロールの完了を2フレーム待つ
        await page.evaluate(() => new Promise<void>((resolve) =>
          requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
 
        const r = await page.evaluate(() => {
          const a = document.activeElement;
          const seen = (window as any).__seen as Set<Element>;
          if (!a || a === document.body || seen.has(a)) return { done: true as const };
          seen.add(a);
 
          const box = a.getBoundingClientRect();
          const fr = [0.1, 0.3, 0.5, 0.7, 0.9];
          let visible = 0;
          let cover = '';
          for (const fy of fr) for (const fx of fr) {
            const x = box.left + box.width * fx;
            const y = box.top + box.height * fy;
            const inside = x >= 0 && y >= 0 && x < innerWidth && y < innerHeight;
            const hit = inside ? document.elementFromPoint(x, y) : null;
            if (hit && a.contains(hit)) visible++;
            else if (hit && !cover) cover = hit.tagName.toLowerCase() + (hit.id ? `#${hit.id}` : '');
          }
          const id = a.id ? `#${a.id}` : '';
          return { done: false as const, sel: a.tagName.toLowerCase() + id, visible, cover };
        });
 
        if (r.done) break;
        if (r.visible === 0) hidden.push(r);
        else if (r.visible < 25) partial.push(r);
      }
 
      mkdirSync('a11y-report', { recursive: true });
      writeFileSync(
        `a11y-report/focus-${vp.name}-${path.replace(/\W/g, '_')}.json`,
        JSON.stringify({ hidden, partial }, null, 2),
      );
      expect(hidden, 'フォーカスを受けたのに全体が隠れた要素').toEqual([]);
    });
  }
}

## アクセシビリティ(WCAG 2.2)
 
- クリック対象は24×24 CSSピクセル以上。小さいアイコンボタンは
  padding で当たり判定を広げ、見た目のアイコンは変えない
- 固定ヘッダーやバナーを足すときは、同じ高さを scroll-padding-top に入れる
- tests/a11y/wcag22 の期待値(24、25点)を緩めて通さない

.icon-button {
  min-width: 24px;
  min-height: 24px;
  padding: 4px; /* 16pxのアイコン + 両側4px = 24px */
}

html {
  scroll-padding-top: 72px; /* 固定ヘッダーの高さ */
}