WCAG 2.2「2.4.10 セクション見出し」とは？Level AAAの要件、実装、確認方法

greeden

2年前

WCAG 2.2の達成基準2.4.10「セクション見出し」は、文章が複数のセクションで構成されている場合に、見出しを使って内容を整理することを求めるLevel AAAの基準です。

これは「短い文章にも必ず見出しを足す」という要件ではありません。話題ごとに分かれた内容があるとき、その区切りと目的を読者が把握できるようにする基準です。

適切な見出しは、画面を見ながら必要な箇所を探す人だけでなく、スクリーンリーダーの見出し一覧や見出し移動を使う人にも、ページの構成を伝えます。

達成基準2.4.10が求めること

達成基準の中心は、文章内に存在するセクションを見出しで整理することです。セクションとは、同じ話題を扱う一つ以上の段落、リスト、表、画像などをまとめた部分を指します。

確認項目	判断の目安
対象となる内容	話題や目的の違いによって、文章が複数のまとまりに分かれている。
必要な対応	各セクションの冒頭に、その内容を識別できる見出しを置く。
見出しの意味	HTMLの見出し要素だけに限らず、各種コンテンツのタイトルなども含む広い意味で使われる。
十分ではない表現	区切り線、枠、文字サイズ、色の違いだけでセクションを示す。
対象外	文章内のセクションではないユーザーインターフェースコンポーネント。名前、役割、値などは達成基準4.1.2で扱う。

見出しを設けることが内容に合わない文章もあります。そのため、2.4.10はすべてのコンテンツに同じ形を強いる基準ではなく、セクションとして整理された文章を対象にしています。

HTMLで見出しを実装する方法

ページタイトルの下にセクションを配置する

HTMLでは、ページ全体のタイトルを<h1>、主要なセクションを<h2>、その中の小見出しを<h3>とする構成が基本です。数字の小ささではなく、内容の親子関係で見出しレベルを選びます。

HTML例

<h1>会社概要</h1>
<p>会社の概要を説明します。</p>

<h2>事業内容</h2>
<p>提供している事業を説明します。</p>

<h3>Webサイト制作</h3>
<p>Webサイト制作の支援内容を説明します。</p>

<h2>お問い合わせ</h2>
<p>問い合わせ方法を案内します。</p>

この例では「Webサイト制作」が「事業内容」に含まれるため、<h3>を使っています。文字を小さく見せたいという理由で見出しレベルを選ぶと、文書構造と見た目が食い違います。

見た目だけの見出しを避ける

大きな文字や太字だけで作った見出しは、視覚的には区切りに見えても、支援技術が見出しとして判別できない場合があります。見出しであることをHTMLで表し、CSSは見た目の調整に使います。

改善前

<p class='heading'>お問い合わせ</p>

改善後

<h2>お問い合わせ</h2>

動的に追加する内容にも見出しを含める

JavaScriptで新しいセクションを追加するときも、静的なHTMLと判断は同じです。追加先の見出し階層を確認し、セクションの内容を説明する見出しを一緒に挿入します。

JavaScript例

const section = document.createElement('section');
const heading = document.createElement('h2');
const description = document.createElement('p');

heading.textContent = '新しいお知らせ';
description.textContent = '追加された情報をここに表示します。';

section.append(heading, description);
document.querySelector('main').appendChild(section);

実際の見出しレベルは、追加先の構造に応じて選びます。コード上で常に<h2>を生成すればよいわけではありません。

画面に表示しない見出しは限定して使う

レイアウト上は表示しない見出しを、スクリーンリーダー向けに用意する方法もあります。ただし、表示されない見出しは、画面を見て内容を理解する人の助けにはなりません。見出しを表示できない理由と、他の利用者に構造が伝わるかを確認してから使います。

<h2 class='visually-hidden'>お問い合わせ情報</h2>
<p>電話番号やメールアドレスを案内します。</p>

visually-hiddenの実装方法はサイトによって異なります。支援技術からも消してしまう設定になっていないか、実際の環境で検証します。

よくある問題と改善方法

問題	読者への影響	改善方法
見出しがない	話題の切り替わりと各部分の目的を把握しにくい。	セクションの冒頭に、内容を説明する見出しを置く。
見た目だけで見出しを表す	支援技術が見出しとして判別できない場合がある。	`<h1>`から`<h6>`までの要素で構造を表す。
階層が内容と合わない	どの小見出しがどのセクションに属するか分かりにくい。	親子関係に合わせて見出しレベルを選ぶ。
「詳細」「その他」などの曖昧な見出し	見出しだけを読んでも内容を予測できない。	「申込方法」「利用上の注意」のように話題を特定する。
段落ごとに見出しを付ける	内容が細かく分断され、かえって全体像を追いにくい。	同じ話題の段落を一つのセクションとしてまとめる。

見出しのレベルが途中で変わっている場合も、数字だけで機械的に直さないことが大切です。まず文章の構造を確認し、見出しレベルがその親子関係を表しているかを判断します。

目視、支援技術、自動ツールで確認する

見出しだけを順に読む
見出しの一覧から、ページの話題と流れを予測できるかを確認します。
本文との対応を確認する
各見出しの直後に、その見出しが示す内容が続いているかを確認します。
見出し階層を確認する
<h2>と<h3>の関係が、セクションと小セクションの関係に合っているかを確認します。
スクリーンリーダーで移動する
見出し一覧や見出し単位の移動を使い、表示上の構造と読み上げ上の構造が一致するかを確かめます。
動的コンテンツも操作する
タブ、アコーディオン、追加読み込みなどを実際に動かし、表示後の見出し構造を確認します。
自動ツールの結果を目視で補う
axeやWAVEなどで構造上の問題候補を探し、見出しが必要な場所や文言の分かりやすさは人が判断します。

自動ツールは、見出し要素の有無や階層の不自然さを探す手掛かりになります。一方で、文章がどこでセクションに分かれるか、見出しが内容を適切に説明しているかまで自動判定に任せることはできません。

実装後のチェックリスト

話題の異なるセクションに見出しがある。
見出しだけを読んでも、ページの構成を把握できる。
見出しの文言が、直後の内容を具体的に示している。
見出しレベルが、内容の親子関係を表している。
文字サイズや色だけで見出しを表していない。
動的に追加されるセクションも確認した。
スクリーンリーダーと自動ツールの両方で確認し、最後に人が判断した。

より広い範囲の実装例は、見出し構造の作り方と確認方法でも解説しています。

当社では、Webアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。サイトのアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。