要約

見出しタグを使用すると、ユーザーは視覚的なスタイルに頼ることなく、文書のアウトラインを理解してナビゲートすることができます。

テクニック

例

例 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>

関連リンク