accessibility-review

/accessibility-review

見慣れないプレースホルダーを見かけた場合や、どのツールが接続されているか確認する必要がある場合は、CONNECTORS.md をご覧ください。

デザインまたはページを監査し、WCAG 2.1 AA のアクセシビリティ準拠状況を確認します。

使用方法

/accessibility-review $ARGUMENTS

アクセシビリティを監査する：@$1

WCAG 2.1 AA クイックリファレンス

知覚可能

• 1.1.1 テキスト以外のコンテンツに代替テキストがある
• 1.3.1 情報と構造が意味論的に伝えられている
• 1.4.3 コントラスト比が 4.5:1 以上（通常のテキスト）、3:1 以上（大きなテキスト）
• 1.4.11 テキスト以外のコントラストが 3:1 以上（UI コンポーネント、グラフィック）

操作可能

• 2.1.1 すべての機能をキーボードで利用できる
• 2.4.3 フォーカスの順序が論理的である
• 2.4.7 フォーカスインジケーターが表示される
• 2.5.5 タッチターゲットが 44x44 CSS ピクセル以上である

理解可能

• 3.2.1 フォーカス時の動作が予測可能である（予期しない変更がない）
• 3.3.1 エラーが特定されている（エラーの内容を説明する）
• 3.3.2 入力欄にラベルまたは説明がある

堅牢

• 4.1.2 すべての UI コンポーネントに名前、ロール、値がある

よくある問題

1. 色のコントラストが不十分
2. フォームのラベルがない
3. インタラクティブな要素をキーボードで操作できない
4. 意味のある画像に代替テキストがない
5. モーダルでフォーカスが閉じ込められる
6. ARIA ランドマークがない
7. コントロールなしでメディアが自動再生される
8. 延長オプションのない時間制限

テスト方法

1. 自動スキャン（問題の約 30% を検出）
2. キーボードのみでのナビゲーション
3. スクリーンリーダーでのテスト（VoiceOver、NVDA）
4. 色のコントラストの確認
5. 200% に拡大 — レイアウトが崩れますか？

出力

## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]

### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]

### Findings

#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |

#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |

#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |

#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |

### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |

### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |

### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |

### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have

コネクターが利用可能な場合

~~design tool が接続されている場合：

• Figma から色の値、フォントサイズ、タッチターゲットを直接確認します
• デザイン仕様でコンポーネントの ARIA ロールとキーボード操作を確認します

~~project tracker が接続されている場合：

• 重要度と WCAG の達成基準を添えて、アクセシビリティに関する各指摘のチケットを作成します
• 指摘事項を既存のアクセシビリティ改善エピックにリンクします

ヒント

1. まずコントラストとキーボード操作から始めます — よくある問題や影響の大きい問題を最も多く検出できます。
2. 実際の支援技術でテストします — 私の監査は出発点として役立ちますが、VoiceOver/NVDA を使った手動テストで、自動監査では見つからない問題も検出できます。
3. 影響度に基づいて優先順位を付けます — まずユーザーの利用を妨げる問題を修正し、細部の調整はその後に行います。