WCAG 2.4.10: セクション見出し

WCAG 2.4.10 は、ページに複数のセクションが含まれている場合には、コンテンツを整理するためにセクション見出しを使用することを求めており、これによりユーザーはページの構造をナビゲートし理解できるようになります。この基準は、スクリーンリーダー利用者、認知アクセシビリティのニーズがある人、そして長いまたは複雑なコンテンツの中で自分の位置を把握するために文書構造に依存しているすべての人を支援します。

この規定の意味

WCAG 2.4.10 — セクション見出し（レベルAAA）では、「コンテンツを整理するためにセクション見出しが使用されている。」と定めています。これは、Webページや文書が複数の明確に区別できるセクションに分割されている場合、それぞれのセクションには、そのトピックや目的を説明する、プログラムによって判別可能な見出しが必要であることを意味します。意図されているのは、見た目だけ見出し風にスタイルされたテキストを置くことではなく、ブラウザと支援技術の両方に階層構造を伝える実際の見出しマークアップを使用することです。

HTMLでは、これはネイティブの見出し要素である<h1>〜<h6>を適切に使用することを意味します。メインのトピックを持つページには<h1>を付け、主要なセクションには<h2>、その中のサブセクションには<h3>、というように続きます。見出しレベルは、視覚的なスタイルの都合ではなく、コンテンツの論理的な深さを反映している必要があります。ARIAを使用する場合は、role="heading"とaria-levelの組み合わせも許容されますが、ネイティブのHTML要素が常に推奨されます。

この基準における適合（pass）とは、ページ上のすべての明確なコンテンツセクションに、その後に続く内容を正確に説明する見出しがあり、その見出しが（単に太字や大きな文字として視覚的にスタイルされているだけでなく）セマンティックにマークアップされており、かつ見出しの階層が文書のコンテンツ構成を論理的に反映している状態を指します。不適合（fail）は、コンテンツのセクションにまったく見出しがない場合、見出しレベルが論理的な理由なく飛ばされている場合（<h1>から<h4>へ飛ぶなど）、あるいはセクションのラベルとして適切な見出し要素ではなく、単なるスタイル付きテキストが使用されている場合に発生します。

公式のWCAGの例外に注意することが重要です。この基準は、ページ自体にセクションが存在する場合にのみ適用されます。単純なログインフォームのように、明確なセクションがなく単一の統一されたトピックしか持たない非常に短いページには、複数の見出しを設けることは求められません。この要件は、ラベリングによって利点が得られる複数の明確なコンテンツ領域が存在する場合に発動します。さらに、この基準は、論理的な構成を超えた特定の見出し階層構造を義務付けるものではありません。重要なのは、セクションが存在するところには見出しが存在し、意味のある形で使用されていることです。

この基準はレベルAAAに分類されており、WCAG 2.2の基本的な適合要件ではありませんが、幅広いユーザーの体験を大きく向上させる、最良のアクセシビリティ実践を示すものです。

なぜ重要か

スクリーンリーダー利用者は、長い文書やWebページをナビゲートする際の主な手段として見出しに依存しています。WebAIMのスクリーンリーダーユーザー調査によると、スクリーンリーダーユーザーの大多数が見出しによるナビゲーションを日常的に行っており、常に最もよく使われるナビゲーション方法の1つとして挙げられています。見出しが存在しない、あるいは不適切に構造化されている場合、スクリーンリーダー利用者はページの先頭からすべてのコンテンツを順番に聞かなければならず、これは、視覚ユーザーに目次や章タイトルのない本を最初から最後まで読むことを強いるのと同じです。

現実の例を考えてみましょう。トルコの家電を販売するeコマースサイトの製品詳細ページには、製品仕様、カスタマーレビュー、配送情報、返品ポリシーといったセクションがあるかもしれません。これらのセクションのどれにも見出し要素がなければ、Firefox上のNVDAで操作している視覚障害のあるユーザーは、それらの間をジャンプすることができません。すべてのコンテンツを順に聞くか、試行錯誤的な検索戦略を使うしかなく、認知的負荷と作業時間が大幅に増加します。各セクションに適切な<h2>見出しがあれば、同じユーザーはHキーを押すだけで、数秒でセクションからセクションへ瞬時に移動できます。

認知障害のあるユーザーにも大きなメリットがあります。明確な見出しは道標として機能し、注意障害、読字困難、記憶障害のある人が、集中を失った後でもすばやく自分の位置を再確認できるようにします。世界保健機関によれば、世界で約13億人が何らかの障害を抱えており、その中で認知・神経系の状態は大きく、かつ増加し続けている割合を占めています。

キーボードのみのナビゲーションやスイッチアクセスデバイスに依存する運動障害のあるユーザーも恩恵を受けます。多くの支援技術は、見出し構造を利用してスキップナビゲーションの機会を作り出し、目的のコンテンツ領域に到達するために必要な身体的負担を軽減します。

障害者アクセスを超えて、適切な見出し構造には重要なSEO上の利点もあります。検索エンジンはページのトピック構造を理解するために見出し階層を利用しており、それがランキングや検索結果でのコンテンツの表示方法に影響を与えます。よく構造化された見出しアウトラインは、ユーザーとクローラーの両方にコンテンツの質を示します。これは、このAAA基準を実装することが、法的に義務付けられていない組織にとっても、ビジネス上説得力のある理由となることを意味します。

テスト方法

axe DevToolsまたはLighthouseによる自動スキャン: ChromeまたはFirefox向けのaxe DevToolsブラウザ拡張機能をインストールし、ページ全体のスキャンを実行します。heading-orderおよびpage-has-heading-oneに関連する問題を確認します。自動スキャンで問題が検出されなかったとしても、それはWCAG 2.4.10への準拠を確認するものではなく、自動化可能なサブセットのチェックをクリアしたに過ぎないことに注意してください。Chrome DevToolsのLighthouseも、アクセシビリティ監査の中で見出し関連の問題を表示します。「Heading elements are not in a sequentially-descending order（見出し要素が順次降順の順序になっていない）」という警告を探してください。
手動によるコンテンツレビュー — 文書アウトライン: HeadingsMap（ChromeおよびFirefoxで利用可能）などのブラウザ拡張機能を使用して、ページ上のすべての見出し要素のビジュアルアウトラインを生成します。このアウトラインを批判的にレビューします。そのページのコンテンツ構造を正確に反映しているでしょうか。すべての明確なセクションは見出しで表現されているでしょうか。ページ上に表示されているコンテンツセクションのうち、アウトラインに現れないものはないでしょうか。もしあれば、それらのセクションには見出しが欠けており、そのページは2.4.10に不適合です。
NVDAとFirefoxによるスクリーンリーダーナビゲーション: Firefoxでページを開き、NVDAを起動します。Hキーで見出しを順方向にジャンプし、Shift+Hで逆方向にジャンプします。各見出しに到達した際、その見出しが後続のコンテンツを正確に説明しているかどうかを確認します。また、見出しの下にあるとアナウンスされることなく現れる大きなコンテンツブロックがないかどうかも確認します。NVDAの要素リスト（NVDA+F7）を開き、見出しタブを選択して、見出しの一覧を確認し、欠落しているセクションやラベル付けが不適切なセクションを特定します。
VoiceOverとSafari（macOS/iOS）によるスクリーンリーダーナビゲーション: macOSでは、VoiceOver（Command+F5）を有効にし、Safariでページを開きます。VO+Command+Hを使用して見出し間を移動します。iOSでは、ローターを使用し（2本指で回転させてHeadingsに設定）、下方向にスワイプして見出し間を移動します。すべてのコンテンツセクションに見出しナビゲーションで到達できることを確認します。
JAWSとChromeによるスクリーンリーダーナビゲーション: JAWSでは、Hキーで見出しを順に移動し、Insert+F6で見出しリストを開きます。このリストを確認して、完全性と論理的な階層をチェックします。見出しが単なるスタイリング目的で使われていないこと、つまり本当にセクションのラベルとして機能しているものだけが見出しとして現れていることを確認します。
キーボードのみのナビゲーションチェック: キーボードだけを使用して、見出しを使わずにページのすべての主要セクションをナビゲートしてみます。各セクションに到達するまでに、インタラクティブ要素を何回タブで移動しなければならないかを記録します。これにより、適切な見出し構造がない場合にキーボードユーザーにかかる負担の大きさを把握できます。

修正方法

スタイル付きテキストのみでラベル付けされたセクション — 不適切な例

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

スタイル付きテキストのみでラベル付けされたセクション — 適切な例

<!-- セマンティックな見出し要素を使用すると、セクションはスクリーンリーダーでナビゲート可能になる -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

スタイル目的で見出しレベルを飛ばしている — 不適切な例

<h1>Annual Report 2024</h1>
<!-- h2とh3を飛ばし、見た目が小さいためにh4を使用 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

スタイル目的で見出しレベルを飛ばしている — 適切な例

<h1>Annual Report 2024</h1>
<!-- 主要セクションにはh2を使用し、見た目のサイズはCSSで制御する -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

主要なページセクションに見出しがない — 不適切な例

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- このオフィス所在地セクションには見出しがない -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

主要なページセクションに見出しがない — 適切な例

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- オフィス所在地セクションには、説明的な見出しが追加された -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

aria-levelなしでARIAのheadingロールを使用している — 不適切な例

<!-- aria-levelなしのrole=headingはデフォルトでレベル2となり、意図と異なる場合がある -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

aria-levelなしでARIAのheadingロールを使用している — 適切な例

<!-- ネイティブHTMLが強く推奨される。ARIAを使う場合はaria-levelを明示する必要がある -->
<!-- 推奨される方法: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- ネイティブ見出しが使えない場合に許容される方法: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

よくある間違い

<p>や<div>要素に.titleや.section-headerのようなCSSクラスを適用し、実際の<h1>〜<h6>要素の代わりに使うこと: 視覚的なスタイリングだけでは、支援技術に構造を伝えることはできません。見出しは本物の見出し要素であるか、有効なARIAのheadingロールと明示的なレベルを持っていなければなりません。
文書の階層ではなくフォントサイズに基づいて見出しレベルを選ぶこと: 本来は<h2>であるべきところを、見た目のサイズがちょうどよいという理由だけで<h4>を選ぶと、文書アウトラインが崩れ、スクリーンリーダーユーザーは、前にレベル2や3がないのに「見出しレベル4」と読み上げられて混乱します。
<h1>を視覚的に小さく見せるためにfont-sizeやfont-weightを上書きし、より低いレベルの見出し要素を使わないこと: これは視覚的な階層とセマンティックな階層の不一致を生みます。サイズの制御にはCSSを、構造の伝達にはネイティブの見出しレベルを使用してください。
タブパネル、モーダルダイアログ、AJAXで読み込まれる結果など、動的に読み込まれるコンテンツセクションに見出しを付けないこと: ページに新しいコンテンツが挿入されると、しばしば見出し構造が欠落します。動的にレンダリングされる各セクションには、見出しによるナビゲーションを行うユーザーがラベルのないコンテンツの島に取り残されないよう、適切な見出しを含める必要があります。
ページタイトルとして1つの<h1>だけを使用し、その後に5つ以上の明確なコンテンツセクションがあるにもかかわらず、追加の見出しを設けないこと: <h1>の存在は自動チェックを満たしますが、その後の主要セクションがラベル付けされていない場合、2.4.10の要件は満たされません。
見出しを<button>や<a>要素の中にネストすること: インタラクティブ要素の中に見出しを配置すると、支援技術に対して矛盾するロールを生み、HTMLとしても無効です。見出しはコンテンツセクションをラベル付けするためのものであり、インタラクティブなコントロールをラベル付けするためのものではありません。
aria-levelを指定せずにrole='heading'を使用すること: ARIAの暗黙のデフォルトレベルは2であり、意図した文書構造と一致しない場合があります。その結果、セクションが別のレベルにあるべきなのに、誤ったアウトラインが密かに生成されてしまいます。
装飾的または繰り返しの見出しを追加すること — たとえば、ページタイトルをすべてのコンテンツカード内で<h2>として繰り返すなど、ナビゲーション上の価値を持たない見出しノイズを生み出すこと: 見出しは導入するセクションを一意かつ正確に説明すべきです。冗長な見出しは、スクリーンリーダーユーザーにとって見出しナビゲーションの有用性を損ないます。
スクリーンリーダー専用の構造を提供しようとして、display:noneやvisibility:hiddenで見出しを視覚的に非表示にすること: これらのCSSプロパティは、要素を支援技術からも隠してしまいます。見出しをアクセシビリティツリーには残しつつ画面上では非表示にする必要がある場合は、標準的な視覚的非表示テクニック（position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);）を使用してください。
ページコンテンツが再構成されるリデザイン時に、見出し構造を更新しないこと: 初期開発時に追加された見出しは、コンテンツセクションが並べ替えられたり、統合されたり、置き換えられたりしても、そのまま放置されがちです。見出しの監査は、一度きりのアクセシビリティ修正ではなく、あらゆるコンテンツやデザインレビューサイクルの一部であるべきです。

トルコのアクセシビリティ規制との関係

トルコの大統領通達 2025/10は、2025年6月21日付官報第32933号で公布され、トルコで事業を行う幅広い主体に対して包括的なデジタルアクセシビリティ義務を定めています。この通達は、デジタルアクセシビリティ遵守の技術標準としてWCAG 2.2と整合しており、公的機関、eコマースプラットフォーム、銀行および金融機関、病院および医療提供者、20万人以上の加入者を持つ通信会社、旅行代理店、民間輸送会社、そして国民教育省（MoNE）に認可された私立学校に適用されます。

WCAG 2.4.10 — セクション見出しはレベルAAAの基準です。これは、通達の下で最低限法的に要求される基準（レベルAおよびAAでの適合）には含まれていないことを意味します。しかし、この通達のより広い意図は、すべてのユーザーにとって意味のあるデジタルアクセスを確保することであり、2.4.10のようなレベルAAAの基準は、最良のアクセシビリティ実践を表すものとして明示的に認識されています。

特に公的機関、銀行、病院、大手通信事業者などの対象組織にとって、WCAG 2.4.10を実装することは、規制上の最低要件を超えたアクセシビリティへのコミットメントを示すものです。実務上、よく構造化された見出し階層は、いくつかのAAレベルの成功基準（1.3.1 情報及び関係性、2.4.6 見出し及びラベルなど）の前提条件でもあります。そのため、完全なAA適合を目指す組織は、その取り組みの一環として自然と2.4.10への準拠に近づくことになります。

障害のあるユーザーを対象とした専門サービスや、高齢者、認知障害のあるユーザー、支援技術ユーザーなど多様な市民を対象とする公的機関のデジタルサービスは、2.4.10を完全に実装することで特に大きな恩恵を受けます。トルコにおけるデジタル政府サービス（e-devlet）への注力とeコマースの拡大を踏まえると、堅牢なコンテンツ構造はアクセシビリティ要件であるだけでなく、ユーザビリティおよび法的リスク管理の観点からも優先事項となります。

トルコでWCAG 2.2レベルAAA（2.4.10を含む）での認証を自主的に取得する組織は、アクセシビリティのリーダーとしての地位を確立し、ブランドへの信頼を高め、訴訟リスクを低減するとともに、トルコ統計機構（TÜİK）が報告する約850万人の障害者を含む対象ユーザー層を拡大することができます。

出典と参考資料

AWCAG 1.1.1: 非テキストコンテンツ AWCAG 1.2.1: 音声のみおよび映像のみ（事前録画）AWCAG 1.2.2: キャプション（事前録画）