見出しレベルは1つだけ増やす必要があります

見出しが論理的な順序になっていることを確認してください。例えば、すべての見出しが h1 から h6 要素でマークアップされていて、それらが階層的に順序付けられていることを確認します。例えば、h1 要素に続く見出しレベルは、h3 要素ではなく h2 要素であるべきです。最後に、実際は見出しではないテキストに見出し要素を使用しないようにします。

効果的な見出しを書いていることを確認するには、ページ上の見出しを通して読み、見出しの情報だけでページのコンテンツ内容を把握できるかどうかを自分自身に聞いてみます。もし答えが「いいえ」である場合、見出しの書き直しを検討します。それを実施している間、見出しを書いている時かつその時にのみ見出し要素 (h1 から h6) を使用していることを確認します。そのようなマークアップをすることはテキストを目立たせる簡単な方法ですが、見出し以外の用途に使用すると、支援技術のユーザーにとって web ページが操作しづらいものになります。

例

カメラの露出を手動で設定するための web ページを作成する場合、次のように手順をアウトラインとして簡略化できます:

• Setting the Exposure Manually on a Camera
  • Set the ISO
  • Choose an aperture
  • Set a shutter speed

リスト内の各項目の詳細は埋めなければなりませんが、これは主要な手順あるいはプロセスの一部の優れた全体像であり、このリスト項目を見出し構造の基礎として使用できます。この例では、最初の項目が h1 要素としてマークアップされ、残りの項目は h2 要素としてマークアップされます:

<h1>Setting the Exposure Manually on a Camera</h1>
      <p>Put text here...</p>
   <h2>Set the ISO</h2>
      <p>Put text here...</p>
   <h2>Choose an aperture</h2>
      <p>Put text here...</p>
   <h2>Choose a shutter speed</h2>
      <p>Put text here...</p>

ベストプラクティス: メインコンテンツを h1 要素から始める:

通常、最も良い対応は、web ページのメインコンテンツをレベル1の見出し要素 (h1) で開始し、この高レベルの見出しの前に他の見出しを置かないことです。ページのサブセクションはそれぞれレベル2の見出し要素 (h2) でマークアップされるべきです。もしレベル2セクションの中にサブセクションが存在する場合、それらはレベル3 (h3) などでマークアップされるべきです。これは厳格なルールではありませんが、メインコンテンツの前にくるあらゆるものは、どのような見出しでもマークアップされるべきではありません。h1 がメインコンテンツの最初に現れるべき主な理由の一つは、スクリーン・リーダーのユーザーがキーボードショートカットを用いて最初の h1 に直接移動できるためであり、原則として、web ページのメインコンテンツに直接移動できるようにするべきであるためです。h1 が存在しない場合、もしくは h1 がメインコンテンツの最初の部分以外に現れる場合、スクリーン・リーダーのユーザーは web ページの構造を理解するために内容をさらに聞かねばならず、貴重な時間を失います。

すべてのベストプラクティスについての推奨事項と同様に、コンテンツを <h1> から開始しても意味がない場合や、コンテンツの前に別の見出しを置くことが最善の場合があるといった例外がありますが、この例外はほとんどの web ページには該当しません。