LEARN BY EXAMPLE
1.3.1 情報及び関係性 レベル A
見出しや表のつながりを、見た目以外でも伝える。
概要
見た目や音で伝えている情報・構造・関係を、ソフトが読み取れる形、又は説明する文章でも伝えます。例えば、文字を大きくして見出しに見せるときは、見出しであることと、その階層も伝わるようにします。
同じ見た目でも伝わる構造が変わる
利用者が困る例 大きさと太さだけで見出しを表す
ソフトが取得できる見出し
見出しの情報なし。
「開催案内」「開催日時」「参加費」も、普通の段落です。
文字は読めても、見出しをたどれない。
「参加費」の見出しへ移る機能を使って、料金を探せません。
改善した例 見出しと階層も伝える
開催案内
開催日時
11月30日 14:00〜16:00
参加費
無料
ソフトが取得できる見出し
- 上位の見出し：開催案内
- 下位の見出し：開催日時
- 下位の見出し：参加費
見出しをたどって内容を探せる。
「開催日時」と「参加費」が、同じ階層の見出しだとわかります。
達成できないと起こる問題の例
イベントの案内ページで、「開催案内」を大きな文字に、「開催日時」と「参加費」を小さな太字にしています。しかし、すべて普通の段落として作られていて、見出しの情報がありません。
読み上げソフトを使う利用者は、文字を読めても、どれが見出しかを把握できません。見出しをたどって「参加費」の説明へ移ろうとしても、その機能を使って探せません。
達成するための改善例
同じ案内で、「開催案内」を上位の見出し、「開催日時」と「参加費」をその下の同じ階層の見出しとして作ります。ウェブページを作る言語のHTMLでは見出しを表す要素を使って、この関係を伝えられます。
見た目の大きさと太さは同じままでも、読み上げソフトが見出しとその階層を取得できます。利用者は見出しをたどり、知りたい内容を探せます。
確認のポイント
- 見出しに見える文字はソフトにも見出しとして伝わりますか。階層も内容の関係に合っていますか。
- 箇条書きは、項目が集まったリストとして伝わりますか。
- 表の値がどの行・列の見出しに対応するかわかりますか。
- 入力欄が対応する項目名や、関連する入力欄の集まりと結び付いていますか。
条件と補足
見出し以外の構造も対象
この基準は見出しだけを扱うものではありません。例えば、次のような関係も対象です。
- 持ち物を並べた箇条書きと、その各項目。
- 時刻表の時刻と、停留所や行き先を示す見出し。
- 「メールアドレス」という項目名と、その入力欄。
- いくつかの選択肢と、それらをまとめる質問文。
位置・色・太さなどで伝える意味や、音で伝える区切り・強調も確認します。見た目を変えて読んだり、音声や点字で情報を得たりするときにも、その意味が保たれるようにします。
ソフトでわかる形と文章の説明
HTMLには見出し・リスト・表・入力欄の関連付けなどを表す仕組みがあります。使う要素を見た目だけで選ばず、内容の意味に合わせます。見出しを表す要素を使っていても、内容の階層に合っていなければ、正しい関係は伝わりません。
基準には情報や関係を文章で提供する方法も含まれます。例えば、印で示した必須項目に対して「『＊』の付いた項目は必須です」と説明する方法です。説明はどの情報について述べているかがわかる場所に置きます。
使用する技術で構造や関係を表せる場合は、その仕組みを使うことが公式解説で強く勧められています。画面の文字を順に読み上げられるだけで、構造や関係まで伝わっているとは限りません。
ほかの基準との違い
見出しの文言が内容や目的を説明しているかは、2.4.6「見出し及びラベル」で扱います。意味に影響する読み上げ順序は1.3.2「意味のあるシーケンス」、色だけで情報を区別していないかは1.4.1「色の使用」でも確認します。
この改善例はこの案内の見出しと階層に関するものです。ページやサイト全体のWCAG適合を示すものではありません。
参照資料
- WCAG 2.2 本体：1.3.1 Info and Relationships（要件）
- WAIC：1.3.1 情報及び関係性の解説（日本語訳）
- W3C：Understanding 1.3.1（英語公開版）
- W3C：H42 見出しを見出し要素で表す方法（実装例）
- W3C：G115 意味に合った要素で構造を表す方法（実装例）
テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。
出典の最終確認: 2026-11-08。画面と説明文は、この教材のために作った例です。