LEARN BY EXAMPLE
2.4.10 セクション見出し レベル AAA
本文を話題ごとに整理し、各まとまりに見出しを付ける。
概要
本文が話題ごとのまとまりで構成されている場合は、それぞれに見出しを付けて整理します。見出しから全体の構成や読みたい内容のある場所を把握できるようにします。
見出しから持ち物の説明を見つけられるようにする
PCやスマートフォンで講座サイトを開き、写真入門に持参するものを探す場面です。両側の本文は同じで、話題ごとの見出しの有無を比べます。
利用者が困る例 話題のまとまりに見出しがない
持ち物の説明がどこにあるか見当を付けにくい。
ページの題名はあっても、本文の話題を見出しでたどれません。
改善した例 各まとまりの先頭に見出しがある
講座サイト
写真入門のご案内
学べること
構図の基本と、光の向きに合わせた撮影方法を学びます。講師の実演を見た後で、自分でも写真を撮って練習します。
持ち物
カメラ、又は撮影できるスマートフォンをご用意ください。屋外で撮影するため、歩きやすい靴でお越しください。
申込方法
講座サイトの「講座を探す」から「写真入門」を選び、「申し込む」へ進んでください。申込期限は11月30日です。
「持ち物」の見出しを手がかりに、読む箇所を選べる。
本文を最初から読み直さなくても、案内の構成を把握できます。
達成できないと起こる問題の例
長い文章から必要な情報を探すことが難しい人が、PCやスマートフォンで講座サイトを開き、写真入門に持参するものを確認しています。案内には、学べること・持ち物・申込方法が複数の段落に分けて書かれています。
しかし、話題ごとの見出しがありません。利用者はどこから持ち物の説明になるか見当を付けにくく、本文を読み進めながら探す負担がかかります。読み上げの見出し移動を使う人も、持ち物の箇所へ直接移れません。
達成するための改善例
同じ案内を「学べること」「持ち物」「申込方法」のまとまりに分け、それぞれの先頭に見出しを付けます。講座内容や持ち物、期限の情報はそのまま保ちます。
利用者は見出しで構成を把握し、「持ち物」の箇所を選んで読めます。HTMLでは適切なレベルの見出し要素で構造も伝えると、対応する読み上げソフトの見出し移動でも探せるようになります。
確認のポイント
- 本文に複数の話題や段階がある場合、それぞれを見出しで整理していますか。
- ページ全体の題名だけでなく、本文内のまとまりにも見出しがありますか。
- まとまりの始まりを、余白・罫線・囲みだけで表していませんか。
- 見出しを順に読むと、内容の全体像と読みたい箇所を把握できますか。
- 見出しとして表示した部分は、ソフトにも見出しと構造が伝わりますか。
条件と補足
本文のまとまりを整理する
ここでいうセクションは、一つ以上の関連する話題や考えを扱う、文書内のまとまりです。一つの段落だけの場合もあれば、複数の段落や画像・表・リスト、さらに小さなまとまりを含む場合もあります。HTMLのsection要素だけを指す言葉ではありません。
「見出し」は広い意味で使われており、文書の種類に応じたタイトルや、まとまりの冒頭に置く見出しを含みます。この基準は本文の構成を対象とし、ボタンや入力欄など、個々の操作部品すべてにセクション見出しを付ける要件ではありません。
どんな文章も細分化するわけではない
話題ごとのまとまりを持つ文書では、各まとまりの見出しが理解と移動を助けます。一方で、短い一続きの文章を無理に細分化することや、どのような種類の文書にも見出しを差し込むことを一律に求めてはいません。
公式解説では、原文にない見出しを加えられない既存の文書や、見出しを挿入すると不自然になる手紙を挙げています。文書の性質と構成を確認します。今回の講座案内は、サイト側で話題ごとに整理できる文書の例です。
2.4.6と1.3.1との違い
AAの2.4.6「見出し及びラベル」は、見出しやラベルを用意した場合に、その言葉が主題や目的を説明しているかを扱います。AAAの2.4.10は、本文のまとまりを見出しで整理することを求めます。
1.3.1「情報及び関係性」では、見た目で示す見出しや構造を、ソフトが取得できることなどを確認します。見出しの設置、内容を説明する言葉、構造の伝達を分けて確かめます。
HTMLの見出し要素を使う場合は、本文の階層に合うレベルを選びます。文字を大きくするためだけに見出しのレベルを選ばず、見た目はCSSで整えます。図は同じ本文に見出しを加えた静止比較で、見出し移動の機能を再現するものではありません。
参照資料
- WCAG 2.2 本体:2.4.10 Section Headings(要件)
- WAIC:2.4.10 セクション見出しの解説
- W3C:Understanding Section Headings(英語公開版)
- W3C:G141 見出しでページを整理する方法
- W3C:H69 各まとまりの先頭に見出し要素を置く方法
テクニックは達成する方法の例です。出典の最終確認: 2026-11-10。講座サイトと案内は、この教材のために作った架空の例です。