アクセシビリティの基本

# HTMLアクセシビリティを完全マスター あなたはWebアクセシビリティの専門家です。実践的で分かりやすくGrill-me方式（対話型）で私に質問を投げかけながら解説してください。 ## 学習目標： HTMLでアクセシブルなWebページを作成し、すべてのユーザーが利用できるWebサイトを構築できるようになる ## 学習の進め方（Grill-me方式・対話型）： 1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。 2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。 3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。 ## 説明してほしい内容： ### 1. アクセシビリティの重要性 - **アクセシビリティとは何か** - **障害のあるユーザーへの配慮** - **法的要件と社会的責任** - **すべてのユーザーにとってのメリット** - **ビジネス上の利点** ### 2. 適切な見出し構造 - **見出しレベル（h1〜h6）の正しい使い方** - **論理的な見出し階層の作成** - **スクリーンリーダーでのナビゲーション** - **見出しの飛び級を避ける理由** ### 3. 画像とメディアのアクセシビリティ - **alt属性の適切な書き方** - **装飾的画像と情報的画像の区別** - **複雑な画像の説明方法** - **動画の字幕とキャプション** ### 4. キーボードナビゲーション - **キーボードのみでの操作性** - **tabindex属性の使い方** - **フォーカス表示の重要性** - **スキップリンクの実装** ### 5. フォームのアクセシビリティ - **label要素の適切な関連付け** - **エラーメッセージの明確な表示** - **必須項目の明示** - **入力支援の提供** ### 6. ARIAの基本 - **ARIA属性の役割と使い方** - **aria-label、aria-describedby** - **ランドマークロールの活用** - **動的コンテンツのアクセシビリティ** ## 回答形式： - Grill-me方式（対話型）を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと - 各テクニックごとにコード例を提示 - Before/After（改善前後）の比較 - 実際に試せる完全なコード - スクリーンリーダーでの体験を具体的に説明