概要
見出しタグには<h1>(メインタイトル)から<h6>(最も小さな小見出し)まで6つのレベルがあり、順番に使うことでページのコンテンツの入れ子構造のアウトラインを作るようになっています。一番上にH1が1つ、その主要セクションにH2、そのさらに下位区分にH3、という具合です。「見出し階層」とは、単純に、ページの見出しが実際にこの入れ子構造の順序に従っているか、それともH1から間のH2を飛ばしていきなりH3に移るように、レベルが飛ばされたり順序を無視して使われたりしていないか、ということを指します。
見出しが、構造的な意味ではなく、見た目(たまたま望みのフォントサイズで表示される見出しレベルを選ぶ)だけで選ばれている場合、これを間違えやすくなります。
重要な理由
適切に構成された見出し階層は、ページに直接組み込まれた目次のような働きをします。検索エンジンもスクリーンリーダーの利用者も、ページのコンテンツがどう構成されているかを理解し、気になるセクションへ直接移動するために、これに頼っています。見出しレベルが飛ばされていたり順序が乱れていたりすると、このアウトラインが壊れてしまい、目の見える訪問者が普通にスクロールして読む分には見た目上問題なく読めたとしても、プログラム的にはページの構造が本当にたどりにくくなります。
これを正しく行うために、ページに必要以上の見出しを追加する必要はありません。単に、ページがすでに持っている見出しレベルを、フォントサイズだけを基準にあちこち飛ばすのではなく、正しい入れ子の順序で使うだけで十分です。
修正方法
- ページ上のすべての見出しを順番にリストアップし、そのレベル(H1、H2、H3など)を記録します。多くのブラウザのアクセシビリティツールや拡張機能が、このアウトラインを自動生成できます。
- ページにちょうど1つのH1があり、その後に主要セクション用のH2が続いていることを確認します。
- 見出しレベルが飛ばされていないか確認します。例えばH2の直後にH3を挟まずH4が来ているような箇所です。見つかった場合は、欠けているレベルを補うか、飛ばされた見出しのレベルを下げて調整します。
- 見出しがアウトライン上の構造的な位置ではなく、単に見た目のサイズだけで選ばれていた場合は、見出しレベルを変更し、フォントサイズはスタイルで別途調整しましょう。
- Launch Readinessのチェックを再実行し、階層が一貫したものになったか確認しましょう。