a11y-audit

スキル：アクセシビリティ監査

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み込みます。一度だけ確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーのみです。これは npx skills add の動作です。そのことを明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。 開けなかったファイルの内容を推測してはいけません。

WCAG 2.2 およびプロジェクトの ARIA パターンに照らして評価します。

手順

1. ${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md（POUR に整理され、P0/P1/P2 に分類）と ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md を読みます。
2. コンポーネントごとに必須の P0 項目を確認します：キーボードで操作できること、フォーカスが見えること（≥3:1）、スクリーンリーダー向けの名前／ロール／状態、コントラスト（テキスト 4.5:1／UI 3:1）、ターゲットサイズ ≥24×24、色だけで情報を示さないこと。
3. WCAG 2.2 の追加項目を確認します：フォーカスが隠れないこと（2.4.11）、ターゲットサイズ（2.5.8）、アクセシブルな認証（3.3.8）。
4. コントラストは目視ではなく、測定します。 レンダリング済み HTML について、実際の出力を報告するために、実レンダリングのゲートを実行します（CLAUDE.md → Verification Protocol）：node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs <file> [--dark]（すべてのテキスト要素）および node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark]（デフォルト／ホバー／フォーカス状態のすべてのインタラクティブ要素。ホバー状態の不具合も検出します）。個別の色の組み合わせは python3 ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py "<fg>" "<bg>" で確認します。測定していない比率を記載してはいけません。
5. モーション低減への対応を確認します（${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md）。

出力

問題点をまとめた表を作成します：WCAG 基準（例：1.4.3）・重大度（P0/P1/P2）・不適合の内容・具体的な修正方法。合格した項目は明示的に確認します。アクセシビリティを見た目と引き換えにしてはいけません。