# 小見出しのない長いページ

Source: https://easeweb.dev/learn/section-headings
Topics: ページの構造 > 長い内容が見出しで区切られている (WCAG 2.4.10)
The fix: 段落を話題ごとにまとめ、それぞれの先頭に「返金」「交換」のように内容を表す h2 を置きます。話題の中にさらに小さな話題があれば h3 にします。本文には手を加えません。見出しは本文を区切るためのもので、どこかを置き換えるものではありません。
Test with: screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/section-headings.html https://www.w3.org/WAI/WCAG22/Techniques/general/G141 https://www.w3.org/WAI/WCAG22/Techniques/html/H69 https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html https://webaim.org/projects/screenreadersurvey11/ https://www.w3.org/WAI/tutorials/page-structure/headings/ https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

衣料品ショップのヘルプセンターに、「返品と返金」というページがあります。CMSのテキストブロックに一度に書かれたもので、タイトルの下に12の段落が並び、それぞれが一つのことを説明しています。最初の2つは返品の期限、次の3つは返品できる商品、さらに3つは返送の方法、その次の2つは返金、最後の2つは交換と破損した商品についてです。文章はよく書けていて、上から順に読めば分かりやすいページです。

けれども、このページを上から順に読む人はあまりいません。たいていは「返金にはどれくらいかかるか」のような一つの疑問を持って来て、その答えが書かれた部分を探します。目で見る人には、同じような灰色の文章のかたまりが12個見えるだけで、どこから返金の話になるのかを示すものがありません。スクリーンリーダー利用者が見出し一覧を開くか、Hキーで見出しを順に移動すると、出てくるのは「返品と返金 見出しレベル1」の1つだけです。返金にかかる日数は9番目の段落にあり、たどり着くには最初から聞いていくしかありません。

## 確認できる問題

達成基準2.4.10 セクション見出し（レベルAAA）は、セクション見出しを使ってコンテンツを整理することを求めています。その解説書（Understanding）は、ページがセクションに分かれているなら、それぞれに導入となる見出しが必要だと述べています。区切り線や囲みなどの見た目は見出しを補うことはできても、それだけではセクションを示すのに十分ではない、とも書かれています。WCAGの定義では、セクションとは、一つまたは関連する複数の話題を扱う、まとまった文章の一部で、一つの段落だけのこともあります。この返品ページには、返品の期限から破損した商品まで6つのセクションがありますが、どれも見出しで始まっていません。達成方法G141のテストは、まさにこの点を確かめます。セクションに分かれたページを調べ、各セクションに見出しがあるかを確認するものです。

HTMLには、見出しを求める仕組みがありません。`h1` が1つと `p` が12のページは正しいHTMLで、ブラウザーはそのまま表示し、CMSのテキストブロックも入力されたとおりに保存します。本文にどんな話題があるかを知っているのは書いた人だけなので、見出しは書いた人が加えなければ入りません。

これは、[ページの構成と食い違う見出し](/ja/learn/heading-structure)とは別の問題です。そちらは、見出しが見た目では描かれているのにマークアップされておらず、1.3.1を満たしていません。こちらは、マークアップすべき見出しがそもそもありません。

## 利用者への影響

ページを最初から通して読む人は、何も見落としません。影響を受けるのは、長いページの一部だけを探す人です。ヘルプ、ポリシー、規約、ガイドといったページは、よくそのように読まれますが、このページには探す手がかりが何もありません。

## 自動チェックとAIの限界

ページ上の要素はどれも正しいため、スキャンでは何も報告されません。タイトルが `h1` なので axe の `page-has-heading-one` は合格し、`heading-order` も比べる見出しが1つしかありません。EaseWebの診断では、メインの内容に6つ以上の段落、または12以上のフォームの欄が、間に見出しを挟まずに続くページを、`ew:section-headings-manual-check` として確認に回します。段落は合わせて1,000文字以上あるときが対象で、漢字やかなのような全角文字は2文字と数えます。ラジオボタンやチェックボックスは、1グループを1つの欄と数えます。ただし、本文が話題に分かれているかどうかは判断できません。手紙や短い物語は、何ページ続いても見出しが要らないことがあります。どこで話題が始まり、それぞれをどう呼ぶかは、本文を読む人にしか決められません。ツールに見出しを加えてもらったときは、その見出しを読み、各見出しがセクションの実際の内容を表していること、一つの話題を二つに分けたり、段落ごとに見出しを付けたりしていないことを確かめてください。

## 修正前：タイトルの下に12の段落

```html
<main>
  <h1>返品と返金</h1>
  <p>ほとんどの商品は、お届けから30日以内であれば返品できます。…</p>
  <p>11月1日から12月24日までのご注文は、1月31日まで返品できます。</p>
  <p>返品できるのは、未使用で、購入時の包装のまま、タグが付いている商品です。…</p>
  <p>セールで購入した商品も、ほかの商品と同じように返品でき、お支払いいただいた金額を返金します。</p>
  <p>刻印入りのジュエリーなど、名入れをした商品は、破損して届いた場合にのみ返品できます。</p>
  <p>返品の手続きは、ログインして「注文履歴」を開き、商品の横の「返品」を選んで始めます。…</p>
  <p>返送用のラベルをメールでお送りします。…</p>
  <p>商品はしっかり梱包し、返金されるまで郵便局の受領証を保管しておいてください。</p>
  <p>荷物が届いてから2営業日以内に、商品を確認します。…</p>
  <p>ギフトカードで支払った場合は、新しいギフトカードに返金し、メールでお送りします。</p>
  <p>サイズや色を変えたい場合は、商品を返品し、あらためて注文してください。…</p>
  <p>商品が破損していた場合や、注文と違う商品が届いた場合は、7日以内に写真を添えてメールでお知らせください。…</p>
</main>
```

- タイトルの後に12の段落が続き、新しい話題の始まりを示すものがページ上にありません。
- 返品の期限、返品できる商品、返送の方法、返金、交換、破損した商品という6つの話題のどれにも、見出しがありません。
- スクリーンリーダーの見出し一覧には「返品と返金」しかなく、返金の説明を見つけるには最初から聞いていくしかありません。

## 修正後：話題ごとに見出しで始める

```html
<main>
  <h1>返品と返金</h1>
  <h2>返品できる期間</h2>
  <p>ほとんどの商品は、お届けから30日以内であれば返品できます。…</p>
  <p>11月1日から12月24日までのご注文は、1月31日まで返品できます。</p>
  <h2>返品できる商品</h2>
  <p>返品できるのは、未使用で、購入時の包装のまま、タグが付いている商品です。…</p>
  <p>セールで購入した商品も、ほかの商品と同じように返品でき、お支払いいただいた金額を返金します。</p>
  <p>刻印入りのジュエリーなど、名入れをした商品は、破損して届いた場合にのみ返品できます。</p>
  <h2>返送の方法</h2>
  <p>返品の手続きは、ログインして「注文履歴」を開き、商品の横の「返品」を選んで始めます。…</p>
  <p>返送用のラベルをメールでお送りします。…</p>
  <p>商品はしっかり梱包し、返金されるまで郵便局の受領証を保管しておいてください。</p>
  <h2>返金</h2>
  <p>荷物が届いてから2営業日以内に、商品を確認します。…</p>
  <p>ギフトカードで支払った場合は、新しいギフトカードに返金し、メールでお送りします。</p>
  <h2>交換</h2>
  <p>サイズや色を変えたい場合は、商品を返品し、あらためて注文してください。…</p>
  <h2>破損・誤配送の場合</h2>
  <p>商品が破損していた場合や、注文と違う商品が届いた場合は、7日以内に写真を添えてメールでお知らせください。…</p>
</main>
```

1. 本文を読み、話題が始まる場所に印を付けます。同じことを扱う段落はまとめたままにします。返品できる商品とセール品は一つの話題で、返品の手続きと返送用のラベルも一つの話題です。
2. 各話題の先頭に、ページの `h1` より一段下の `h2` を置きます。スクリーンリーダーの見出し一覧に出るようになり、選ぶとその話題の先頭へ移動します。
3. 見出しには、その話題が答える内容を、探しに来る人が使う言葉で付けます。「返金」「交換」「破損・誤配送の場合」のようにします。

6つの話題がそれぞれ見出しで始まるため、ページの構成が画面にも見出し一覧にも表れ、返金にかかる日数へは一度の移動で届きます。これで修正前の例が直り、2.4.10を満たします。見出しは `h2` 要素なので、見て分かる構造がコードにも表れ、1.3.1の求めるとおりになります。段落の文章は一字も変えていません。

## 実装の判断

見出しが抜けやすいのは、編集画面で見出しを加えにくい場所です。

- 太字は使えても見出しのスタイルがない、ページビルダーのテキストウィジェットやCMSの欄：見出しの選択肢を用意し、その内容で使うレベル、通常はh2〜h4に絞る。書き手が見出しを太字で描かずに済む。太字で描いた見出しは、[ページの構成と食い違う見出し](/ja/learn/heading-structure)の問題になる。
- ワープロから貼り付けた文章：見出しが太字の行だったため、段落として入ってくる。書式なしで貼り付け、編集画面で見出しを加える。
- 本文全体を一つの欄に入れるテンプレート：内容が増えていくポリシーやヘルプ記事は、セクションごとに欄を分け、それぞれに見出しを持たせると扱いやすい。

区切るのは長さではなく話題です。この例の「交換」のように、一つの段落だけのセクションでもかまいません。段落ごとに見出しを付けると、見出し一覧がページと同じ長さになってしまいます。一つの話題がさらに分かれる場合、たとえばカードでの返金とギフトカードでの返金を分けるなら、`h2` のセクションの中にそれぞれ `h3` を置きます。

区切り線、余白、囲みでセクションの終わりは示せても、何のセクションかは示せず、スクリーンリーダーの一覧にも出ません。見出しに添えて使い、見出しの代わりにはしません。

とても長いページでは、先頭に見出しへのリンクの一覧を置くと、スクリーンリーダー利用者に限らず、誰でもセクションへ移動できます。各 `h2` に `id` を付けてリンクします。この一覧は見出しを補うもので、見出しの代わりにはなりません。

長いフォームも同じように区切ります。設定ページや、連絡先、配送先、支払いと続く申し込みフォームでは、欄のまとまりごとに見出しを付けます。`fieldset` と `legend` は、まとまりの中の欄に移動したときにその名前を伝えますが、`legend` はスクリーンリーダーの見出し一覧には出ません。そのため、長いフォームで移動の目印になるまとまりには、見出しも必要です。

セクションのない文章もあります。解説書は二つの例を挙げています。一つは手紙で、いくつかの話題に触れていても、見出しを入れるとかえって不自然になります。もう一つは、作者が見出しを入れずに書いた既存の文書を、そのまま掲載する場合です。通して読む物語やニュース記事も同じです。2.4.10が見出しを求めるのは、内容がセクションに分かれている場合で、長いページすべてではありません。また、注記にあるとおり、対象は文章の中のセクションで、ユーザーインターフェイスのコンポーネントは4.1.2で扱います。

## 修正の確認

1. ページを読み、話題が始まる場所に印を付ける。どの話題の直前にも見出しがあり、どの見出しもそのセクションの内容を表している。
2. ブラウザーの開発者ツールのアクセシビリティツリーや、見出しの構成を表示する拡張機能で見出しを一覧にする。各セクションの見出しは `h2`〜`h6` で、属するセクションの見出しより一段下のレベルにあり、空の見出しはない。
3. スクリーンリーダーで見出し一覧を開き（NVDAではInsert + F7で「見出し」を選ぶ、VoiceOverではローター）、「返金」のような一つの話題の見出しを選ぶ。その話題の先頭へ移動し、レベルと一緒に読み上げられる。NVDAやJAWSでは、Hキーで次のセクションへ移動する。
4. 間の本文を読まずに、見出しだけを上から順に読む。読みたいセクションを選べる目次になっている。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ページの本文、テンプレート、編集画面のスタイルを変更した際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。本文、ショップ、コード内の `…` は仮のものです。スクリーンリーダーによって見出し一覧の言い方は異なるため、正確な言い回しではなく、見出しの言葉とレベルを確認してください。どこで話題が始まり、各見出しに何と書くかは本文によって決まり、どのページにも当てはまる規則はありません。このガイドは、長い内容にそもそも見出しがあるかどうかを扱います。すでにある見出しがマークアップされているか、レベルが正しいか、言葉がセクションを表しているかは、[ページの構成と食い違う見出し](/ja/learn/heading-structure)で扱います。実際に使用する支援技術で、操作全体を確認してください。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）