review-a11y について
Agent向けの内部アクセシビリティレビュー用スキルです。コードは変更せず、必須チェックリストに沿って評価し、根拠付きの指摘を定型形式で返します。
主な機能
- 01セマンティック要素とARIAの確認
- 02ラベル、代替テキスト、キーボード操作の確認
- 03フォーカス、コントラスト、モーションの評価
- 04コードを変更せず指摘を報告
活用シーン
- 01マージ前のUI変更レビュー
- 02アクセシビリティ基準による変更箇所の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ gtrabanco/ agentic-workflow --skill review-a11yインストール後、Claude Code で/review-a11yを入力して読み込まれたか確認します。
詳細
アクセシビリティのレビュー(内部)
review-change / product-audit が会話内で作成します。エージェントは、これをルーティングされたステップとしてインラインで実行してください。指摘事項のみ。編集やリファクタリングは行いません。
対象範囲
呼び出し元が指定した差分またはパス/glob。指定がない場合は、現在の変更とデフォルトブランチを比較します。返す表の先頭に対象範囲を記載してください。
チェックリスト(すべての項目を評価してください。省略できる項目はありません。該当なしの場合は明記してください)
✓ 汎用要素よりセマンティック要素を優先している(クリック可能な div ではなく button を使う、見出しの順序が適切、ランドマークが存在する) ✓ すべての入力に対応するラベルがあり、すべての画像に代替テキストがある(空の代替テキストは装飾目的の場合のみ) ✓ 変更箇所をキーボードだけで完全に操作できる(Tab の順序、Enter/Space による有効化、Escape による閉じる操作) ✓ 動的な変更時にフォーカスが適切に管理される(モーダルではフォーカスを閉じ込めて復元する。ルート変更時にはフォーカスを移動する) ✓ 変更されたテキスト/UI のコントラストがプロジェクトで宣言されたレベルを満たしている(デフォルトは WCAG AA)。確認できる場合は計算値を記載する ✓ ARIA はセマンティクスだけでは対応できない場合に限り、正しく使用されている(誤った ARIA は重大な指摘事項です) ✓ 色だけで情報を伝えていない ✓ 動き/アニメーションが視差効果を抑える設定に対応している(動きを追加していない場合は該当なし) ✓ エラーメッセージがプログラム上、対応するフィールドに関連付けられている
重要度の基準
有能なユーザーの結果が変わる場合、またはプロジェクトが明示的に宣言したルールに違反している場合に限り、違反しているルールを証拠と併記して報告してください。
指摘事項ではないもの:コメント/句読点の誤り、書式のみの差異、根拠となるルールのないスタイル上の好み、SPEC で指定されたシナリオを超える仮定上の堅牢性。
適切に作成された変更では、表を空欄にして Decision: PASS とするのが想定される結果です。表を埋めるためだけに指摘事項を追加しないでください。
返す内容
REVIEW ACCESSIBILITY — scope: <scope>
| # | Finding | Sev | Evidence | Suggested fix |
|---|---------|-----|----------|---------------|
| 1 | <what> | critical|major|minor | <file:line> | <smallest action> |
Checklist: <n> evaluated, <n> pass, <n> findings, <n> n/a (<which + why>)
Summary: <1-2 sentences>
Decision: PASS | FAIL
重大または主要な指摘事項が未解決の場合は FAIL。それ以外は PASS。軽微な指摘事項はブロック要因になりません。呼び出し元のトリアージステップに回してください。
完了条件
- チェックリストのすべての項目を、証拠(ファイル名:行番号またはコマンド出力)とともに評価するか、理由を添えて明示的に該当なしとする。
- 上記の固定形式ブロックのみを返す。それ以外は何も返さず、コードを変更しない。