アクセシビリティ (WCAG 2.1 AA)

クイック監査

# 自動チェック (~30% の問題を検出)
npx axe-core-cli http://localhost:3000

# またはブラウザコンソール内
# axe DevTools 拡張機能をインストール → スキャン実行

自動ツールは 30% をカバーします。残りは手動テストで検出します。

重要なチェックリスト

1. キーボードナビゲーション (最も一般的な失敗)

// ❌ 悪い例 - クリックのみのインタラクション
<div onClick={handleClick}>Click me</div>

// ✅ 良い例 - キーボードでアクセス可能
<button onClick={handleClick}>Click me</button>

// ✅ 良い例 - キーボード対応のカスタム要素
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') handleClick()
  }}
>
  Click me
</div>

**

...