要約

見出しタグを使用するとユーザーは視覚的なスタイルに頼らずに文書の概要を把握し移動できます。

テクニック

例

例 1 — レベル番号付き見出し

見出しのレベル番号は、各サブセクション (h1、h2、h3) に合わせて1つずつ減らします。

<section role="doc-part" aria-labelledby="hd01">
  <h1 id="hd01">Book One: 1805</h1>
     <section role="doc-part" aria-labelledby="hd02">
       <h2 id="hd02">Part 1</h2>
         <section role="doc-chapter" aria-labelledby="hd03">
           <h3 id="hd03">Chapter 1</h3>
例2 - 見出しとサブタイトルを分ける

タイトルとサブタイトルは、hgroup要素でグループ化して関連付けます。

aria-labelledby属性は、サブタイトルにもアクセシブルな名前が追加されるのを避けるためhgroup全体ではなく、見出し要素のみを参照することに注意してください。

<section role="doc-chapter" aria-labelledby="hd01">
   <hgroup>
     <h1 id="hd01">ORIGIN OF THE WORLD.—FIRST DYNASTY.</h1>
     <p role="doc-subtitle">URANUS AND GÆA. (Cœlus and Terra.)</p>
   </hgroup>
   …
</section>
例3 — 見出しのないセクション

aria-label属性を用いて、視覚的な見出しを含まないセクションに意味のあるタイトルを付与できます。

<section role="region" aria-label="preamble">

よくある質問

すべてのセクションにh1見出しを使用できますか?

HTML アウトラインアルゴリズムは HTML 仕様から削除されました（ユーザーエージェントと支援技術はこの機能をサポートしませんでした）。すべてのセクションにh1見出しを使用すると、支援技術にとってはすべてがトップレベルの見出しとして表示され、ユーザーがコンテンツをナビゲートする妨げとなります。

見出しレベルは連続している必要がありますか?

見出しは出版物の階層構造を反映する必要があるため、第 2 レベルの見出しには常にh2を使用し、第 3 レベルの見出しにはh3を使用します。可能な限り、レベル番号が飛ばないようにしてください （例えば、 h1の下の見出しにh3を使用しないなど）。

一貫した番号付けを使用すると、ユーザーが出版物の構造に混乱することがなくなります。支援技術には、たとえば見出しレベルを元に、ユーザーが効率的にコンテンツ内を移動できるようにするショートカットキーが用意されています。レベルの番号が飛んでいると、移動方法によってはユーザーはサブセクションがあることに気付かないかもしれません（つまり、特定の見出しレベルに移動しようとしても機能せず、次の見出しに移動する一般的な方法しか機能しません）。

hgroupは長い間推奨されていなかったのではないですか?

はい、この要素は元々 HTML アウトラインアルゴリズムの一部であり、ブラウザーや支援技術では実装されなかった機能です。この機能により、複数の見出し要素をグループ化することはできましたが、文書に適用されるのは 1 つの見出しのみでした。しかし、このモデルに従うと、支援技術によってタグ内のすべての見出しが読み上げられてしまいます。

HTMLからアウトラインアルゴリズムが削除され、それに伴い要素のコンテンツモデルが変更されたことで、複数の見出し要素を組み込むのはエラーと扱われ、支援技術で問題が発生することはなくなりました。

以前は、見出しと複数のサブタイトルをheader要素で囲むことが推奨されていましたが、ドキュメントのヘッダーにはタイトルとサブタイトル以外の要素も組み込めます。hgroup を使用すると、これらの見出しをより効果的にグループ化できます。header内にhgroupを加えることで、見出しグループを他のヘッダーコンテンツと組み合わせられます。

解説

見出しは、支援技術のユーザーにとって主要な移動位置の1つです。

各sectionに、文書内の階層レベルを反映するレベル番号付きの見出し（例： h1 ）が必要です。レベル番号付きの見出しにより、支援技術で文書構造をナビゲートできるようになります。

各見出し要素は、1 つの見出しを表す必要があります。見出しを視覚的な書式設定のために個別のタグに分割しないでください。サブタイトルを組み込む必要があるなら、メインの見出しに組み込むか、後続の段落に組み込んでheaderタグを使用して見出し全体をカプセル化します。

テキストのセクションに見出しがない場合は、囲んでいる要素のaria-label属性によって見出しを付けます。支援技術によってこのラベルが読み上げられ、新しいセクションが始まることがユーザーに通知されます。

注記

figure 、blockquote 、およびその他の HTML5 セクションルート要素内では見出し要素を使用しないでください。これらの機能にはタイトルが付いている場合がありますが、見出し要素を使用すると、ユーザーが次のセクションを見つける際に、それらの要素間も移動しなければならなくなってしまいます。

見出しグループ

hgroup要素は、複数レベルの見出しを単一の要素で実現します。

この要素は、セクションの見出しとして単一のレベル番号付き見出しタグ（h1からh6 ）を使用しますが、サブタイトルを定義するために複数のpタグをグループに組み込めます（例2を参照）。この方法で、サブタイトルにレベル番号付き見出しを使用して読者が新しいセクションが始まっていると勘違いしてしまう問題を回避できます。

また、header要素にタイトルとサブタイトル以外のものも組み込めるので（たとえば、ヘッダーにはエピグラフや画像などを組み込めます）、見出しとサブタイトルをグループ化するためにheader要素を使用する場合の問題も回避できます。追加のコンテンツがある場合は、header要素に見出しグループを追加できます。

<section id="c01" aria-labelledby="c01-hd">
   <header>
      <img src="graphics/chapter-marker.png" alt=""/>
      <hgroup>
         <h2 id="c01-hd">Chapter 1<h2>
         <p role="doc-subtitle">Let there be light</p>
      </hgroup>
      <p role="doc-epigraph">Now the earth was formless and void, 
         and darkness was over the surface of the deep.</p>
   </header>
   …
</section>

関連リンク