--- name: defining-accessibility-requirements description: Defines accessibility requirements for UI elements including semantic markup, ARIA attributes, focus management, and screen reader support. Updates the "アクセシビリティ" section in screen spec.md. allowed-tools: [Read, Write, Glob, mcp__figma__get_screenshot, mcp__figma__get_design_context, mcp__figma__get_metadata] --- # 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** 準拠を目標とします。 | レベル | 対象 | |--------|------| | A | 必須（最低限のアクセシビリティ） | | AA | 推奨（このスキルの主な対象） | | AAA | 任意（特別な要件がある場合） | ### 対象ユーザー - 視覚障害者（スクリーンリーダー使用者） - 弱視者（拡大表示、高コントラスト） - 色覚異常者 - 聴覚障害者 - 運動障害者（キーボードのみ操作） - 認知障害者 ## 出力先 このスキルは**画面仕様書（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](references/workflow.md)**: アクセシビリティ要件定義のワークフロー - **[a11y-patterns.md](references/a11y-patterns.md)**: コンポーネント別アクセシビリティパターン - **[section-template.md](references/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 の存在確認 ```bash ls .outputs/{screen-id}/spec.md ``` ### Step 1: 画面構造を分析 HTMLまたはFigmaから以下を特定： - ページの主要セクション（ヘッダー、メイン、フッター） - ナビゲーション領域 - フォーム要素 - インタラクティブ要素（ボタン、リンク） - 動的コンテンツ領域 - 画像・アイコン ### Step 2: セマンティクス要件を定義 各要素に適切なHTML要素とランドマークを指定： | 要素 | 推奨タグ | role | 備考 | |------|---------|------|------| | ヘッダー | `
` | banner | ページ内で1つ | | ナビゲーション | `