ui-a11y

アクセシビリティ監査

使用するタイミング

コンポーネントやページのアクセシビリティ上の問題を監査し、修正する必要がある場合にこのスキルを使用します。

使用しないタイミング

• デザインシステム全般への準拠状況をレビューする場合 → /ss-review を使用します
• Nielsen の UX ヒューリスティックを確認する場合 → /ss-audit を使用します
• StyleSeed 以外のコード（data-slot やセマンティックトークンがないコード）— StyleSeed の規約を前提としています
• 実行時テストの場合 — これは静的コード監査であり、スクリーンリーダーのシミュレーションではありません

対象：$ARGUMENTS

監査基準

WCAG 2.2 AA 準拠

1. 知覚可能

• 色のコントラスト：テキストは 4.5:1（通常）または 3:1（大きい文字／太字）を満たす必要があります
  • text-muted-foreground（#717182）と bg-background（#FFFFFF）の組み合わせを確認します = 4.6:1（合格）
  • 白地での text-brand を確認します（ブランドカラーとのコントラストを検証してください）
  • コントラスト比を満たさないカスタムカラーにはフラグを立てます
• 非テキストのコントラスト：UI コントロール／グラフィックは 3:1 を満たす必要があります
• テキストによる代替：すべての <img> に alt が必要です。意味を持つアイコンには aria-label が必要です
• 色への依存を避ける：色だけで情報を伝えないでください（アイコン／テキストを追加します）

2. 操作可能

• ポインターターゲット：WCAG 2.2 AA SC 2.5.8 では、24x24 CSS ピクセル以上、または適用可能な間隔／その他の例外が求められます。36px のボタンが必ず不適合になるわけではありません。
  • ユーザビリティの目標として 44x44px（min-h-11 min-w-11）を推奨します。SC 2.5.5 は例外を設けたうえで、AAA でこのサイズを使用します。
  • 視覚上のアイコンの寸法だけでなく、実際にクリックできる領域と隣接するターゲットを確認します。最小基準と拡張基準を参照してください。
• キーボード操作：すべてのインタラクティブ要素をキーボードで操作できる必要があります
  • Tab の移動順序は論理的である必要があります
  • focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
• モーション：アニメーションは prefers-reduced-motion に従う必要があります

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  

3. 理解可能

• ラベル：フォーム入力には、視認できるラベルまたは aria-label が必要です
• エラーメッセージ：フォームのエラーは、プログラムで関連付ける必要があります（aria-describedby）
• 言語：<html lang="en">（またはプロジェクトに適した言語コード）

4. 堅牢

• セマンティック HTML：適切な要素（<button>、<nav>、<main>、<header>）を使用します
• ARIA：Radix のプリミティブによってアクセシブルな動作を実現できますが、組み合わせた要素の名前、状態、フォーカス、キーボード操作は引き続き検証が必要です。
• ロール：ネイティブコントロールを優先してください。ロールを指定するだけでは、キーボード操作やアクセシブルな状態は実装されません。

デザインシステムのトークン参照

トークン	最低コントラスト比	備考
--foreground	7:1 以上	本文テキスト — 使用するスキンで確認してください
--muted-foreground	4.5:1 以上	セカンダリテキスト — 使用するスキンで確認してください
--brand	4.5:1 以上	アクセント — スキンのブランドカラーで確認してください
--destructive	4.5:1 以上	エラー — 使用するスキンで確認してください
--success	3:1 以上	大きい文字／アイコンのみ — 使用するスキンで確認してください
--warning	4.5:1 以上	警告テキスト — スキンによっては、より暗いバリエーションが必要です

出力

1. 検出した問題：重大度（Critical／Major／Minor）を付けて一覧表示します
2. 自動修正：可能な箇所には直接修正を適用します
3. 手動レビューが必要な項目：人による判断が必要な項目にフラグを立てます

例

ユーザーのリクエスト：

コンポーネントやページのアクセシビリティ上の問題を監査し、修正してください。

制限事項

• このスキルは、タスクが上流のソースとローカルプロジェクトのコンテキストに明確に合致する場合にのみ使用してください。
• コマンド、生成コード、依存関係、認証情報、外部サービスの挙動を検証してから変更を適用してください。
• 例を、環境固有のテスト、セキュリティレビュー、破壊的または高コストな操作に対するユーザー承認の代わりとして扱わないでください。