見出し　［文書構造］

見出しは、見た目だけではなく、文書構造に応じて<h1>～<h6>要素を用いてマークアップする

解説

Webページに見出しがある場合、ブラウザや支援技術などのユーザーエージェントが解釈できるように、その見出しを<h1>～<h6>要素を用いてマークアップします。そうすることによって、見出しがその見た目だけではなくマシンリーダブルになります。

見出しがマークアップによってマシンリーダブルになることで、次のようなメリットをユーザーに提供することができるようになります。

  • スクリーンリーダーの見出しジャンプ機能が使える
    • PCでは、Hキーを押すと<h1>～<h6>要素でマークアップされた見出しだけを拾い読みすることができる
    • さらに、数字の1～6のキーを押すと特定の見出しレベルの見出しだけを拾い読みすることができる（例：2キーを押すと、<h2>要素の見出しだけを拾い読みする）
    • スマートフォンやタブレットでも、見出しジャンプ機能が使える
  • ブラウザの拡張機能を用いることによって、マークアップされた見出しを抽出して、そのWebページのアウトラインを確認できる

また、見出しをマークアップする際には、文書構造に応じて、<h1>～<h6>要素のいずれかを用いることになります。

  • <h1>要素は、ページの主題となる大見出しだけに用いる（多くの場合は、メインコンテンツの開始位置にある見出し）
  • 見出しレベルをスキップしない（<h2>要素の見出しがあるセクションの小見出しには、<h4>や<h5>ではなく、<h3>要素を用いる）
  • 見出しレベルは、見た目の大きさではなく、文書構造によって決める

見た目だけ、どんなに見出しに見えるように太字にしたり、文字サイズを大きくしたりしていたとしても、HTMLソースで見出しとしてマークアップされていなければ、ブラウザや支援技術などのユーザーエージェントにとっては見出しではありません。<h1>～<h6>要素を用いて、見出しとしてマークアップをした上で、見た目はCSSを用いて指定するようにしましょう。

事例 1. 見出しのマークアップ

悪い例


<p class="heading2">企業にとっては「目に見えない」機会損失</p>

見た目には見出しだが、パラグラフを示す<p>要素とCSSを用いているため、ユーザーエージェントには見出しであることが分からない。

良い例


<h2>企業にとっては「目に見えない」機会損失</h2>

見た目だけではなく、<h2>要素を用いて、見出しとしてマークアップしている。

事例 2. 見出しレベル

悪い例


<h2>企業にとっては「目に見えない」機会損失</h2>

｛コンテンツ（省略）｝

<h4>多様化する一方のWeb利用環境</h4>

<h2>要素のセクションの次にある見出しが、<h3>要素ではなく<h4>要素でマークアップされており、見出しレベルをスキップしている。

良い例


<h2>企業にとっては「目に見えない」機会損失</h2>

｛コンテンツ（省略）｝

<h3>多様化する一方のWeb利用環境</h3>

見出しレベルをスキップしていない。

WCAG 2.0の達成基準

1.3.1 情報及び関係性の達成基準（レベル A）
何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

WCAG 2.0「ガイドライン 1.3 適応可能」

参考