見出しと構造
見出しはページの骨格です。骨格が伝われば、何のページかが伝わります。
図の中身を文字で読む
- 見出しは、ページの骨格。段を飛ばすと構造が伝わらない。
- h1 このページが答えるもの（1本だけ） ✕ h1 が2本
- どちらが主題か決まらない
- h2 章
- ✕ h2 の次に h4
- h3 節 読み上げで段が欠ける
- ✕ 見た目のために段を選ぶ
- 大きさは CSS で決める
- h1 とタイトルは同じでなくてよい
- h1 はページの中で名乗る。タイトルは一覧の中で見分ける。役目が違う。
ひと目で#
h1 は1本。段は飛ばさない。大きさは CSS で決める。
- h1
- そのページが答えるもの。1ページに1本
- h2 / h3
- 章と節。上から順に段を下げる
- 段を飛ばさない
- h2 の次に h4 を置かない
- 大きさ
- 見た目は CSS の仕事。段は構造で選ぶ
段は、読み上げの順でもある#
図の中身を文字で読む
- 見出しだけを拾うと、ページの筋書きになる
- ○ 段が通っている
- h1 石窯の焼き上がり時間
- h2 平日
- h3 朝6時からh3 昼すぎ
- h2 土日
- 読み上げは見出しだけを辿れる。この筋書きがそのまま聞こえる。
- ✕ 段が飛んでいる
- h1 つきひ
- h4 平日
- h1 石窯の焼き上がり時間
- h3 朝6時から
- h2 土日
- どこが章でどこが節か決まらない。
- 大きさは CSS で決めるので、見た目のために段を選ぶ理由はない。
見出しの段は、画面読み上げで「ここから章が変わる」と伝える印です。読み上げは見出しだけを拾って移動できます。段が飛ぶと、そのあいだの階層が欠けて聞こえます。
同じことが検索側の読み取りでも起きます。どこからどこまでが1つの章かが決まらなくなります。
ロゴを h1 にしない#
ヘッダーのロゴに h1 を付けている実装をよく見ます。すると全ページの h1 がサイト名になり、そのページが何を答えるのかが、どこにも書かれていない ことになります。ロゴは p か div に戻し、h1 は本文に置きます。
間違えやすいところ#
- h1 が2本あるどちらが主題か決まらない
- ロゴを h1 にする全ページの主題が同じになる
- 大きさを合わせるために段を選ぶ構造が見た目に引きずられる
- 見出しに語を詰め込む読む人には不自然に映る
- 見出しを画像にする文字として読めない
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、料金のページに h1 が2本ありました。1本はロゴの画像に付いていて、もう1本が本文の見出しです。読み上げでも検索でも、どちらが主題か決まりません。ロゴは p に戻し、h1 は本文の1本にしました。h2 の次に h4 が来ていた箇所も、見た目のために段を選んでいたので、CSS で大きさを決める形へ直しています。
コピーする#
このコードで動いている見本です
確認する#
- h1 が1本だけある
- 見出しの段が飛んでいない
- 見出しの大きさは CSS で決めていて、段は構造で選んでいる
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
ロゴを h1 にしている。ロゴは p に戻し、h1 は本文の1本にする。段も飛ばさない。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は出す前と出したあとにまとめてある。逆引きには全188件。