1.3.1 情報及び関係性 レベルA 原則1 知覚可能
見出しでページの地図をつくる
目で見る人は、大きな太字をひと目で「見出しだ」と分かります。でも文字を大きくしただけでは、読み上げソフトには見出しだと伝わりません。見出しは、ページの地図のようなものです。
さわってみよう
「見出しだけを一覧する」を押して、このページの地図が手に入るか確かめよう。
読み上げのまね
読み上げソフトの画面
簡単なまねです。読み上げソフトの多くには、見出しから見出しへ飛んだり、見出しを一覧したりする機能があります。
直してみよう
1行ずつ、見た目に合わせて「ふつうの文」か「見出し」か、見出しならレベルを選ぼう。
見出しの一覧（ページの地図）
分かったこと
- 見た目で見出しにしているところは、
<h1>〜<h6>の見出しタグで書く。見た目の構造を、プログラムにも分かる形にするのが 1.3.1 のねらい。 - 見出しのレベルは、中身の大きさの順（章 → 節）に付ける。文字の大きさだけを変えたいときはタグではなく CSS で変える。
- 見出しがあれば、読み上げソフトの利用者も一覧から目的の場所へ飛べる。
- 見出しの言葉は、その部分の中身が分かるものにする（達成基準 2.4.6）。「その1」より「持ち物」のほうが、一覧だけで中身が分かる。
- 見出しのほかに、表・箇条書き・入力欄のラベルなども、見た目の関係をタグで伝える対象になる。
どんな構造や関係が対象になるか、くわしくは WCAG 2.2 の日本語訳で確かめよう。