ss-a11y

このワークフローを開始する前に、セッションごとに1回実行する更新の事前確認に従ってください。

アクセシビリティ監査

レジストリ優先の成果物境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み取ってください。レジストリを使用するプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。

使用しないケース

• デザインシステム全般の準拠レビューには → /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. 操作可能

• タッチターゲット：タッチ操作面では最小 44x44px（min-h-11 min-w-11）が必要です
  • サイズ不足のタッチ操作領域を指摘してください。36〜40px の高さであるという理由だけで、承認済みのポインター優先デスクトップコントロールを指摘しないでください
  • ポインター優先コントロールは、解決済みの仕様に従います。キーボード操作と適用されるアクセシビリティの最低基準を維持してください
  • アイコンボタンには、入力方法に適した明示的な操作領域が必要です
• キーボード操作：すべてのインタラクティブ要素をキーボードで操作できる必要があります
  • 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 UI コンポーネントを使用してください（ARIA を自動的に処理します）
• ロール：カスタムのインタラクティブ要素には、適切な role 属性が必要です

デザインシステムのトークンリファレンス

トークン	最小コントラスト	注記
--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. 手動レビューが必要な項目：人の判断が必要な項目を指摘します