Accessibility Requirements Skill

UIのアクセシビリティ要件（セマンティックマークアップ、ARIA属性、フォーカス管理、スクリーンリーダー対応）を定義するスキルです。

目次

1. 概要
2. 対象範囲
3. クイックスタート
4. 詳細ガイド
5. 出力形式

概要

このスキルは以下のタスクをサポートします：

1. セマンティクス定義: 適切なHTML要素とランドマーク
2. ARIA属性: role、aria-label、aria-describedby等
3. フォーカス管理: タブ順序、フォーカストラップ、フォーカス移動
4. 色・コントラスト: WCAG基準のコントラスト比
5. スクリーンリーダー対応: 読み上げテキスト、ライブリージョン
6. キーボード操作: キーボードのみでの操作可能性

禁止事項

以下は絶対に行わないこと：

• 実装コードの生成（HTML/ARIA実装）
• 特定のa11yライブラリの提案
• 技術スタック固有の実装詳細

このスキルの目的は「どのようなアクセシビリティ要件があるか」の情報整理のみです。

対象範囲

WCAGレベル

このスキルは主に WCAG 2.1 Level AA 準拠を目標とします。

対象ユーザー

• 視覚障害者（スクリーンリーダー使用者）
• 弱視者（拡大表示、高コントラスト）
• 色覚異常者
• 聴覚障害者
• 運動障害者（キーボードのみ操作）
• 認知障害者

出力先

このスキルは画面仕様書（spec.md）の「アクセシビリティ」セクションを更新します。

.outputs/{screen-id}/
├── spec.md                 # ← このスキルが「アクセシビリティ」セクションを更新
├── index.html              # 参照用HTML
└── assets/

クイックスタート

基本的な使い方

以下のFigma画面のアクセシビリティ要件を定義してください：
https://figma.com/design/XXXXX/Project?node-id=1234-5678

エージェントは自動的に：

1. 画面構造を分析
2. セマンティクス要件を整理
3. ARIA属性要件を定義
4. spec.md の「アクセシビリティ」セクションを更新

詳細ガイド

詳細な情報は以下のファイルを参照してください：

• workflow.md: アクセシビリティ要件定義のワークフロー
• a11y-patterns.md: コンポーネント別アクセシビリティパターン
• section-template.md: セクション出力テンプレート

Workflow

アクセシビリティ要件定義時にこのチェックリストをコピー：

Accessibility Requirements Progress:
- [ ] Step 0: spec.md の存在確認
- [ ] Step 1: 画面構造を分析
- [ ] Step 2: セマンティクス要件を定義
- [ ] Step 3: ARIA属性要件を定義
- [ ] Step 4: フォーカス管理を定義
- [ ] Step 5: 色・コントラストを確認
- [ ] Step 6: スクリーンリーダー対応を定義
- [ ] Step 7: キーボード操作を定義
- [ ] Step 8: spec.md の「アクセシビリティ」セクションを更新

Step 0: spec.md の存在確認

ls .outputs/{screen-id}/spec.md

Step 1: 画面構造を分析

HTMLまたはFigmaから以下を特定：

• ページの主要セクション（ヘッダー、メイン、フッター）
• ナビゲーション領域
• フォーム要素
• インタラクティブ要素（ボタン、リンク）
• 動的コンテンツ領域
• 画像・アイコン

Step 2: セマンティクス要件を定義

各要素に適切なHTML要素とランドマークを指定：

Step 3: ARIA属性要件を定義

各インタラクティブ要素のARIA属性：

• aria-label: 視覚的ラベルがない要素
• aria-labelledby: 別要素でラベル付け
• aria-describedby: 追加説明
• aria-expanded: 展開状態
• aria-selected: 選択状態
• aria-hidden: 支援技術から隠す
• aria-live: 動的更新の通知

Step 4: フォーカス管理を定義

• タブ順序（tabindex）
• フォーカストラップ（モーダル内）
• フォーカス移動（エラー時、状態変化時）
• フォーカスインジケーター（視覚的表示）

Step 5: 色・コントラストを確認

WCAGコントラスト比基準：

Step 6: スクリーンリーダー対応を定義

• 画像の代替テキスト（alt）
• アイコンボタンのラベル
• 読み上げ順序
• ライブリージョン（動的更新）

Step 7: キーボード操作を定義

• 全機能のキーボードアクセス
• フォーカス可視性
• ショートカットキー（あれば）
• Escキーでモーダル閉じる等

Step 8: spec.md の「アクセシビリティ」セクションを更新

1. セクションを特定（## アクセシビリティ）
2. ステータスを「完了 ✓」に更新
3. {{ACCESSIBILITY_CONTENT}} を内容に置換
4. 完了チェックリストを更新
5. 変更履歴に追記

出力形式

spec.md「アクセシビリティ」セクションの内容

## アクセシビリティ

> **ステータス**: 完了 ✓  
> **生成スキル**: defining-accessibility-requirements  
> **更新日**: 2024-01-15  
> **準拠レベル**: WCAG 2.1 AA

### セマンティクス

| 要素 | 推奨タグ | role | aria属性 | 備考 |
|------|---------|------|----------|------|
| ページヘッダー | `<header>` | banner | - | - |
| メインナビ | `<nav>` | navigation | aria-label="メインナビゲーション" | - |
| 検索フォーム | `<form>` | search | aria-label="サイト内検索" | - |
| メインコンテンツ | `<main>` | main | - | - |
| 講座リスト | `<ul>` | list | aria-label="講座一覧" | - |
| 講座カード | `<article>` | article | - | 見出し(h3)を含む |

### ARIA属性

| 要素 | 属性 | 値 | 説明 |
|------|------|-----|------|
| 検索ボタン（アイコン） | aria-label | "検索" | 視覚的ラベルなし |
| ハンバーガーメニュー | aria-expanded | "true/false" | メニュー展開状態 |
| ハンバーガーメニュー | aria-controls | "nav-menu" | 制御対象 |
| タブパネル | aria-selected | "true/false" | 選択状態 |
| 進捗バー | aria-valuenow | "75" | 現在値 |
| 進捗バー | aria-valuemin | "0" | 最小値 |
| 進捗バー | aria-valuemax | "100" | 最大値 |

### フォーカス管理

#### タブ順序

1. スキップリンク → 2. ロゴ → 3. ナビゲーション項目 →
2. 検索フィールド → 5. 検索ボタン → 6. メインコンテンツ →
3. 講座カード（順番に） → 8. フッターリンク

#### フォーカス移動

| イベント | フォーカス移動先 |
|----------|----------------|
| モーダル表示 | モーダル内の最初のフォーカス可能要素 |
| モーダル閉じる | モーダルを開いたトリガー要素 |
| フォームエラー | 最初のエラーフィールド |
| ページ内リンク | 対象セクションの見出し |

#### フォーカストラップ

- モーダル/ダイアログ表示中はモーダル内でフォーカスをトラップ
- Tabキーで最後の要素 → 最初の要素へループ
- Shift+Tabで最初の要素 → 最後の要素へループ

### 色・コントラスト

| 要素 | 前景色 | 背景色 | コントラスト比 | 判定 |
|------|--------|--------|---------------|------|
| 本文テキスト | #24243F | #FFFFFF | 14.5:1 | ✓ AA |
| 補足テキスト | #67717A | #FFFFFF | 5.2:1 | ✓ AA |
| ボタンテキスト | #FFFFFF | #0070E0 | 4.6:1 | ✓ AA |
| リンクテキスト | #0070E0 | #FFFFFF | 4.5:1 | ✓ AA |
| エラーテキスト | #D32F2F | #FFFFFF | 5.9:1 | ✓ AA |

#### 色に依存しない情報伝達

- エラー状態: 赤色 + アイコン + テキストメッセージ
- 必須項目: 色 + アスタリスク(*)マーク
- リンク: 色 + 下線

### スクリーンリーダー対応

#### 代替テキスト

| 要素 | alt / aria-label |
|------|-----------------|
| 企業ロゴ | "〇〇株式会社" |
| 講座サムネイル | 講座タイトルを含む説明 |
| 装飾アイコン | aria-hidden="true" |
| 機能アイコン（検索） | aria-label="検索" |

#### 読み上げテキスト

| 要素 | 読み上げ内容 |
|------|-------------|
| 進捗バー (75%) | "進捗 75パーセント" |
| 評価 ★★★★☆ | "評価 5段階中4" |
| 新着バッジ | "新着" |
| 残席わずか | "残席わずか 残り3席" |

#### ライブリージョン

| 要素 | aria-live | 用途 |
|------|-----------|------|
| トースト通知 | polite | 成功/エラーメッセージ |
| 検索結果件数 | polite | 結果更新時 |
| フォームエラー | assertive | 即座に通知が必要 |

### キーボード操作

| 操作 | キー | 動作 |
|------|------|------|
| フォーカス移動 | Tab | 次の要素へ |
| フォーカス移動（逆） | Shift + Tab | 前の要素へ |
| ボタン実行 | Enter / Space | クリックと同等 |
| モーダル閉じる | Escape | モーダルを閉じる |
| ドロップダウン開閉 | Enter / Space | 開閉トグル |
| ドロップダウン選択 | ↑ / ↓ | 項目選択 |
| タブ切り替え | ← / → | 前後のタブ |

### スキップリンク

ページ先頭に以下のスキップリンクを配置：

1. "メインコンテンツへスキップ" → #main-content
2. "ナビゲーションへスキップ" → #main-nav（任意）

### チェックリスト

- [ ] 全ての画像に適切な代替テキスト
- [ ] 全てのフォーム要素にラベル
- [ ] キーボードのみで全機能にアクセス可能
- [ ] フォーカスインジケーターが視認可能
- [ ] 色だけに依存しない情報伝達
- [ ] コントラスト比がWCAG AA基準を満たす
- [ ] スクリーンリーダーで論理的な読み上げ順序
- [ ] 動的コンテンツの変更が通知される

完了チェックリスト

生成後、以下を確認：

- [ ] spec.md の「アクセシビリティ」セクションが更新されている
- [ ] ステータスが「完了 ✓」になっている
- [ ] セマンティクス要件が定義されている
- [ ] ARIA属性が明確
- [ ] フォーカス管理が定義されている
- [ ] コントラスト比が確認されている
- [ ] スクリーンリーダー対応が定義されている
- [ ] キーボード操作が定義されている
- [ ] 完了チェックリストが更新されている
- [ ] 変更履歴に記録が追加されている

注意事項

他のセクションを変更しない

このスキルは「アクセシビリティ」セクションのみを更新します。

デザインからの情報不足

Figmaデザインからアクセシビリティ情報が不足している場合：

1. 一般的なパターンを適用（a11y-patterns.md参照）
2. 「要確認」として明示
3. 設計者への確認事項としてリスト

コントラスト比の計算

デザイントークンまたはFigmaから色情報を取得し、コントラスト比を計算。 基準を満たさない場合は警告として記載。

参照

• workflow.md: 詳細なワークフロー
• a11y-patterns.md: アクセシビリティパターン集
• section-template.md: セクション出力テンプレート
• managing-screen-specs: 仕様書管理スキル