この記事でわかること

  • 見出しのレベル(h1〜h6)を、文字の大きさではなく内容の階層で決める考え方
  • レベルを飛ばさないこと、h1を置く場所についてのW3Cの説明
  • 見た目だけで見出しに見せている所の見つけ方と直し方
  • 作ったページの見出しを書き出して確かめる手順

Webページを作るとき、「この文字は少し大きくしたいからh3にしよう」と、見た目で見出しのタグを選んでいないでしょうか。見出しのレベルは、画面の読み上げソフトを使う人が見出しから見出しへ移って内容を探すときの手がかりにもなります。この記事では、見出しの階層を正しく付ける方法を、W3Cのアクセシビリティの解説とWCAGの基準をもとに紹介します。

確認に使ったのは、W3CのWAIのページ構造の解説と、WCAG 2.2とその解説・技法のページで、どれも2026年10月24日に読みました。SEOの効果や、特定のツール・スクールの話は扱いません。

先に結論: 見出しのレベルは内容の階層で決める

先に結論を書くと、見出しはHTMLの見出しの要素(h1〜h6)で付け、レベルは内容の大きなまとまりから小さなまとまりへの順で決めます。文字の大きさはCSSで決め、見出しのレベルとは切り離します。 確かめる点は、次の5つです。

確かめる点 正しい形
付け方 見出しの要素
レベルの順 飛ばさない
サイドバー レベルをそろえる
見出しの文 中身が分かる
文字の大きさ CSSで決める

見出しに関わるWCAGの基準

WCAG 2.2では、見出しについて次の達成基準が関わります。

  • 達成基準1.3.1(レベルA、Info and Relationships): 見た目で伝えている構造や関係を、プログラムで読み取れるようにする
  • 達成基準2.4.6(レベルAA、Headings and Labels): 見出しとラベルで、内容の主題や目的が分かるようにする
  • 達成基準2.4.10(レベルAAA、Section Headings): 内容を整理するために、節の見出しを使う

達成基準2.4.6の解説では、この基準は見出しを付けること自体や、正しいタグで付けることまでは求めておらず、正しく付けることは1.3.1の範囲だとしています。つまり、「見出しの要素で付けているか」と「見出しの文で中身が分かるか」は、別々に確かめます。

見た目ではなく見出しの要素で付ける

達成基準1.3.1の解説では、目の見える人は、大きく太い文字や前後の空き行などの見た目から見出しを見分けるとしています。こうした見た目の構造を、読み上げソフトなど見た目を使わない方法でも伝わるようにするのが、この基準の目的です。

W3Cの技法H42では、HTMLの見出しの要素を使うと、読み上げソフトがその文字を見出しとして、レベルと一緒に伝えられるとしています。読み上げソフトは見出しの間を移動することもでき、使う人が目当ての内容を早く見つけられます。

反対に、W3Cの技法F2では、pの要素をCSSで大きく太くして見出しのように見せただけのものを、基準を満たさない例にしています。支援技術が見出しと区別できないためです。文字を画像にして見出しにしている場合も、見出しの要素で囲む必要があるとしています。

h1からh6を順に入れ子にする

W3CのWAIの解説では、最も重要な見出しがh1、最も重要でない見出しがh6です。同じかより高いレベルの見出しは新しい節を始め、より低いレベルの見出しは、その中の小さい節を始めます。

レベルを飛ばすと分かりにくくなるため、できるだけ避けます。WAIの解説では、h2のすぐ後にh4を置かないよう例を挙げています。ただし、小さい節を閉じて新しい節を始めるときに、h4の後にh2が来るのは問題ありません。

W3Cの技法H69では、レベルを飛ばすと、見出しが意味ではなく見た目で選ばれた印象を与えるとしています。技法G141も、h1の次はh2、h2の次はh2かh3のように、正しく入れ子にすることを勧めています。

h1をどこに置くか

WAIの解説では、h1の置き方として2つの例を示しています。1つは、ページの最初の見出しをh1にし、メニューやサイドバー、フッターの見出しと本文の見出しを1つ下のレベルにする形です。もう1つは、サイトの名前ではなく本文の題をh1にし、本文の中の見出しとほかの部分の見出しをh2にする形です。

W3Cの技法H42の例では、3列の画面で真ん中の列の本文の題をh1にし、ページの最初に出てこなくてもよいとしています。また、この例は見出しのレベルを決めつけるものではないと注記しています。

サイドバーのようにどのページにもある部分は、記事ごとに見出しのレベルを変えません。WAIの解説では、そうした部分ではページの間でそろえることの方が大切だとしています。

見出しの文で中身が分かるようにする

達成基準2.4.6の解説では、見出しがはっきりしていれば、利用者は探している情報を見つけやすくなり、各部分の関係も分かりやすくなるとしています。見出しは長くなくてよく、手がかりになれば1語でも足りることがあります。

W3Cの技法G130では、見出しの最初に、ほかの節と区別できる大事な言葉を置くことを勧めています。例では「Flood preparation」「Fire preparation」のように、違いの部分を先に置いています。見出しを順に拾い読みする人が、目当ての節を見つけやすくなるためです。

入力フォームでも、達成基準2.4.6は項目のラベルに関わります。ラベルの書き方は、Webデザインで入力フォームのラベルと説明を分かりやすくする方法で紹介しています。

手順: 見出しを書き出して確かめる

作ったページは、次の順で確かめます。

  1. 見出しを順に書き出す: ページの見出しの要素を上から順に、レベルと一緒に書き出し、目次のような一覧にします
  2. 節ごとに見出しがあるか見る: W3Cの技法G141・H69と同じく、内容がいくつかの節に分かれているなら、それぞれの節が見出しで始まっているかを見ます
  3. レベルの飛びを見る: 一覧の中で、h2の次にh4が来るような飛びがないかを見ます
  4. 見出しの文を読む: 見出しだけを読んで、それぞれの節に何が書いてあるかが分かるかを見ます
  5. 見た目だけの見出しを探す: 大きく太い文字で見出しのように見せている所が、見出しの要素になっているかを見ます。W3Cの技法F2の確かめ方も、この順です

次のHTMLは、内容の階層に合わせて見出しを付けた見本です。見出しのレベルの付け方を見るためのもので、実行するコマンドではありません。作っているページのHTMLを直すときは、直す前の内容を写して残し、直した後にもう一度見出しを書き出します。

<!-- 見本: 内容の階層で見出しのレベルを決める(文字の大きさはCSSで決める) -->
<h1>はじめてのWebサイトの作り方</h1>
<h2>準備するもの</h2>
<h3>パソコン</h3>
<h3>文字を書くソフト</h3>
<h2>作る手順</h2>
<h3>ページの骨組みを書く</h3>
<h3>見た目を整える</h3>

自分で直すか、相談するかの判断

判断の目安は、「HTMLのタグを替えるだけで、見た目をCSSで保てるか」です。pの要素を見出しの要素に替える、h4をh3に替えて文字の大きさはCSSで調整する、という直し方であれば、自分で直してから、見出しの一覧をもう一度作って見比べます。

テンプレートやページを作る仕組みが見出しのレベルを決めていて、HTMLを直接変えられないときは、どこで決めているかを調べる必要があります。書き出した見出しの一覧を持って、サイトの制作者やWebデザインの講師に見てもらうと、直す場所を絞り込めます。

つまずきやすいところ

  • 大きさで見出しのレベルを選ぶ: 小さい文字にしたいからh4を使う、という選び方はしません。文字の大きさや行間は、Webデザインで文字の大きさと行間を決める方法のようにCSSで決めます
  • 太字だけで見出しにする: 段落を太字にしただけでは、読み上げソフトは見出しと分かりません。見出しの要素で囲みます
  • 画像の文字を見出しにする: 見出しを画像にすると、見出しの要素で囲み、文字の代わりの説明も要ります。説明の書き方は、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています
  • ページごとにサイドバーのレベルが変わる: 本文の見出しに合わせてサイドバーの見出しのレベルを変えると、ページの間でそろわなくなります

まとめ

  • 見出しはHTMLの見出しの要素で付け、見た目だけで見出しに見せません
  • レベルは内容の階層で決め、h2の次にh4を置くような飛ばし方は避けます
  • h1の置き方にはWAIの解説に2つの例があり、サイドバーなどの見出しのレベルはページの間でそろえます
  • 見出しの文は短くてよく、その節の中身が分かる言葉を最初に置きます