見出しレベルは1つだけ増加すべきです

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

効果的な見出しを作成していることを確認するには、ページの見出しに目を通し、見出しで提供される情報のみに基づいてページの内容の概要を把握しているかどうかを自問してください。答えが「いいえ」の場合は、見出しを書き直すことを検討してください。その際には、見出しを記述する場合のみ、見出しマークアップ (h1 から h6 まで) を使用するようにしてください。このようなマークアップを適用すると、テキストを目立たせる簡単な方法になりますが、見出し以外の用途に使用すると、支援技術のユーザーにとってWebページのナビゲーションがわかりにくくなります。

例

カメラの露出を手動で設定する方法に関するWebページを作成する場合は、手順を次のように概要に簡略化できます。

• カメラの露出を手動で設定する
  • ISOを設定する
  • 絞りを選択する
  • シャッタースピードを設定する

このリストの各項目の詳細を入力する必要がありますが、これはプロセスの主要なステップや部分の良い概要なので、これらのリスト項目を見出し構造の基礎として使用できます。この例では、最初の項目は 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 要素をメインコンテンツの先頭に表示する必要がある主な理由の1つは、スクリーン リーダーのユーザーがキーボード ショートカットを使用して最初の h1 要素に直接移動できるためです。これにより、原則として、Webページのメインコンテンツに直接ジャンプできるようになります。h1 要素がない場合、または h1 要素がメイン コンテンツの先頭以外の場所に表示される場合、スクリーン リーダーのユーザーはページ構造を理解するために追加のWebページ コンテンツを聞く必要があり、貴重な時間を無駄にします。

すべてのベスト プラクティスの推奨事項と同様に、 <h1> でコンテンツを開始することが適切でない例外や、コンテンツの前に他の見出しを配置することが最適な場合もありますが、これらの例外は大部分のWebページには適用されません。