スキル自身の言葉で
このスキルは WCAG 2.2 に照らしてウェブアクセシビリティを監査し、修正します。構成の軸は POUR — Perceivable、Operable、Understandable、Robust — と、A、AA、AAA の適合レベルです。エビデンス主導のワークフローを実行します。レンダリング済みのページが利用できる場合は、Lighthouse のアクセシビリティ監査をライブで実行し（Chrome DevTools MCP の lighthouse_audit）、失敗したノードを使ってコンポーネントを特定し、take_snapshot でアクセシビリティツリーを検査したうえで、ソースを修正して再実行します。
ライブツールが使えない場合でも、Lighthouse CLI または axe が自動化できる範囲をカバーし、同じ手動チェックは変わりなく必要です。alt テキスト、コントラスト比、フォーカスの可視性、ターゲットサイズ、モーションの低減、フォームのエラー、アクセシブルな認証に関するコードレベルのルールに加え、critical、serious、moderate の順にランク付けしたトリアージリストを提供します。
生成されるもの
- 優先順位を付けた問題リスト。Critical（直ちに修正）、Serious（リリース前に修正）、Moderate（早めに修正）の階層に分け、具体的な例を挙げて示します。
- 修正済みのマークアップと、そのまま貼り付けられるスニペット。アイコンボタンのラベルを支援技術に伝えるための visually-hidden ユーティリティなどが含まれます。
- references/A11Y-PATTERNS.md にある完全なリファレンス実装。フォームラベル、モーダルのフォーカストラップ、スキップリンク、ARIA タブ、ライブリージョン、エラー処理、スクリーンリーダーコマンドを扱います。
仕組み
- 01ライブのアクセシビリティ監査を実行する
レンダリング済みのページから始め、Lighthouse のアクセシビリティ監査をライブで実行します。一般公開ページには mobile navigation モードを、再読み込みすると認証状態が失われる場合は snapshot モードを使います。
- 02失敗しているコンポーネントを特定する
失敗した監査ノードを使い、リポジトリ全体を一般的なパターンで grep するのではなく、特定のコンポーネントやテンプレートを指し示します。
- 03アクセシビリティツリーを検査する
レンダリング済みのアクセシビリティツリーのスナップショットを読み、名前、ロール、状態、ランドマーク、見出し構造を確認したうえで、影響を受けるフローをキーボードで操作します。
- 04ソースを修正して再検証する
レンダリング結果ではなくソースを変更し、同じ監査と同じ手動操作を繰り返して修正を確認します。
- 05CLI ツールにフォールバックする
ライブのブラウザツールが使えない場合は、Lighthouse CLI または axe の出力と、同じ手動チェックを組み合わせます。自動化だけではバリアの一部しかカバーできないためです。