要約
見出しタグを使用すると、ユーザーは視覚的なスタイルに頼ることなく、文書のアウトラインを理解してナビゲートすることができます。
テクニック
-
すべての見出しが特定されているようにします。[[WCAG-1.3.1]]
-
セクションごとに見出しを1つずつ使用し、文書のアウトラインを明確にします。[[WCAG-2.4.10]]
-
見出しがセクションを説明していることを確認します。[[WCAG-2.4.6]]
-
見出しとサブタイトルを
hgroup
要素でグループ化します。[[WCAG-1.3.1]]
例
よくある質問
- すべてのセクションに
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>
関連リンク
- MDN — <h1>–<h6>: HTML の見出し要素
- MDN — <hgroup>
- HTML —
h1
、h2
、h3
、h4
、h5
、h6
要素 - HTML —
hgroup
要素 - WCAG — h1-h6 を使用して見出しを識別する
- WCAG —コンテンツの各セクションの先頭に見出し要素を提供する
- WCAG —見出しを使用してページを整理する
- WCAG — HTML — 見出しとセクション
- WCAG — HTML — 小見出し、サブタイトル、代替タイトル、タグライン
- WCAG —説明的な見出しを提供する