2.4.10 セクション見出し

要件

ページ内のコンテンツを論理的なセクション（意味のあるかたまり）に分割し、それぞれに記述的な見出し（またはラベル）を設けることで、内容構造を明確にする。

内容のポイント

項目	内容
対象	本文、フォーム、表、リスト、FAQなどの論理ブロック
目的	内容の構造を理解しやすくし、スクリーンリーダー等でのナビゲーションを容易に
想定利用者	視覚障害者や認知障害者、キーボード操作中心のユーザーなど

OKな例

<h2>サービス紹介</h2>
<p>当社が提供する主なサービスをご紹介します。</p>

<h3>Webサイト制作</h3>
<p>コーポレートサイトやECサイトなど…</p>

<h3>展示会サポート</h3>
<p>企画、ブース設計、配布物まで一括対応…</p>

• 各セクションに意味のある見出しがある
• セクションの論理構造が明確

NGな例（構造不明瞭）

<p>当社が提供する主なサービスをご紹介します。</p>
<p>Webサイト制作：コーポレートサイトやECサイトなど…</p>
<p>展示会サポート：企画、ブース設計、配布物まで…</p>

• 全体が段落で構成されており、構造が曖昧
• スクリーンリーダーでは「どこからがどの話題か」が判別しづらい

実装のコツ

方法	内容
適切な見出しタグ <h1>〜<h6> を使用	意味構造を反映した階層で
セクションごとに <section> や <div> を活用	必ずしも<section>は不要だが、意味的には有効
スクリーンリーダー対応を考慮	aria-labelledbyで見出しとの関連を明示することも可能

利点

• キーボードユーザーや支援技術ユーザーがセクションごとにナビゲーションしやすくなる
• 読者にとっても、情報のまとまりが明確
• SEOにも有利（意味のある構造化マークアップ）

チェックリスト

• 内容に応じて論理的な区切り（セクション）を設けているか？
• 各セクションに見出しがあり、内容を的確に表しているか？
• 見出しレベル（h2〜h6）が構造的に適切か？
• スクリーンリーダーでもセクション移動がしやすいか？

まとめ

項目	内容
達成基準	2.4.10「セクション見出し」
等級	AAA
要件	各セクションに分かりやすい見出しを付け、構造を明確にする
推奨実装	hタグによる階層構造と内容に合った文言での見出し付け
利点	ナビゲーション支援・理解促進・SEO効果の向上など

レベルAAAは義務ではありませんが、企業サイト・自治体・教育機関・医療機関などでは積極的に取り入れることで、アクセシブルでわかりやすいサイト構造を実現できます。

一覧に戻る