見出しは「装飾」じゃない。アクセシビリティから紐解く、正しいアウトライン設計の極意
現場でコードレビューをしていると、未だによく見かける光景があります。「デザイン的にここを大きくしたいから`
`でいいや」という判断。あるいは、「` `はロゴだけに使わなきゃいけないから、ページタイトルは` `で……」といった、SEOとアクセシビリティの混同。 これらは、HTMLを単なる「見た目を作るための道具」と捉えている時に起こる典型的なミスです。フロントエンドエンジニアである私たちがHTMLを書く際、意識すべきはブラウザのレンダリングエンジンだけではありません。「情報という名の地図」を、スクリーンリーダーユーザーにどう届けるかという視点です。 今日は、見出しタグの本来の役割と、現場で迷わないための「論理構造」の作り方について、少し踏み込んで話をしましょう。 — 1. なぜスクリーンリーダーは「見出し」を追いかけるのか
視覚情報に頼らないユーザーは、Webページを上から順にすべて読み上げることはまずありません。彼らはまず、「見出し（Heading）のリスト」をジャンプして読み込み、ページの構造を把握します。
例えば、新聞の紙面を想像してください。私たちは大きな見出しだけを視線でなぞって、興味のある記事を探しますよね？ スクリーンリーダーユーザーも全く同じことを、キーボード操作で行っています。
ここで、`
`の次に` `がいきなり現れたり、あるいは見た目の大きさだけでタグを選択していると、この「情報の地図」が壊れます。ブラウザやスクリーンリーダーが生成する「アクセシビリティツリー」において、論理的な親子関係が崩れることは、ユーザーにとって「迷子になる」ことと同義なのです。 — 2. 実務で迷わない「見出し」の運用ルール
現場でよく議論になるのが、「見出しレベルのスキップ」と「`
`の複数使い」です。結論から言いましょう。
見出しレベルは「階層」を守る
`
`（ページの主題）→ `
`（大項目）→ `
`（小項目）という階層構造は、HTMLの基本です。レベルを飛ばすこと（例：h2の次にh4）は、アウトラインの断絶を意味します。
悪い例： H2の直下にいきなりH4を置く（階層の不整合）
良い例： コンテンツが独立しているなら、sectionタグと見出しをセットで考え、必ず階層を埋める
`
`は複数あってもいい（ただし、基本は一つ）
HTML5以降、`
`を各セクションに配置する設計も許容されています。しかし、Web標準の歴史的背景とブラウザの挙動を考慮すると、「ページにつき`
`は1つ」が最も安全で、かつ確実なアクセシビリティを担保します。
迷ったら1つにしておく。これがプロの守りです。
—
3. 実践！セマンティックなマークダウン・サンプル
以下に、アクセシビリティとメンテナンス性を両立させた、実務でそのまま使える構成例を提示します。CSSでの見た目の調整は`class`に任せ、HTMLはあくまで「意味」に集中させます。
最新のフロントエンド開発トレンド
モダンフレームワークの比較
最近のトレンドは、サーバーサイドレンダリングを組み合わせた…
ReactとNext.jsの優位性
コンポーネント指向の恩恵を最大限に受けるには…
CSS設計のベストプラクティス
Tailwind CSSが普及した今、私たちが考えるべきは…
このコードのポイント：
1. `
2. 階層の維持: `
` -> `
` -> `
` と、論理的に正しい順序で構成しています。
3. スタイリングとの分離: 「h3だから小さい文字にしなければならない」という固定観念を捨てましょう。CSS側で `h3 { font-size: 1.5rem; }` のように当てれば、見た目とHTMLの役割は完全に分離できます。
—
最後に：コードは「誰かのための手紙」である
見出しタグを正しく選ぶことは、一見すると地味で、SEOにも劇的な影響を与えないかもしれません。しかし、あなたの書いたコードが、スクリーンリーダーを通じて誰かの情報の取得を助け、その人のWeb体験を豊かにしているとしたら——それこそが、プロのフロントエンドエンジニアが目指すべき誇りではないでしょうか。
「見た目」のためのHTMLから、「意味」のためのHTMLへ。
次回のコミットから、ぜひこの意識をコードに反映してみてください。あなたの書くHTMLが、より多くのユーザーにとっての「道しるべ」になることを期待しています。
コメント