HTML
セマンティックHTMLでアクセシビリティ警告
見出しの階層が飛んでいる
こんな症状
Lighthouseで「Heading elements are not in a sequentially-descending order」と出る。
まず試す
見出しを h1→h2→h3 の順に使い、レベルを飛ばさない。サイズを変えたいなら CSS の font-size で調整する。
html
<h1>タイトル</h1>
<h2>サブ</h2>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓h1 の次に h3 を使った
→ h2 を使う（レベルを飛ばさない）。 - ✓見た目を小さくしたいだけ
→ 見出しレベルは構造で決め、サイズは CSS の font-size で変える。 - ✓h1 が複数ある
→ 1ページに h1 は1つにする。
なぜ起きる？
h1の次にh3を使うなど、見出しレベルを飛ばしているよ。HTMLの見出し（h1〜h6）は文書の階層構造を表すもので、h1→h2→h3の順番で使う必要があるんだ。スクリーンリーダーは見出し構造でページをナビゲーションするから、飛ばすとアクセシビリティに問題が出るよ。
✕ エラーが起きるコード
<h1>タイトル</h1><h3>サブ</h3>
<!-- h2 を飛ばしている -->✓ 直したコード
<h1>タイトル</h1><h2>サブ</h2>✅ 直ったか確認
Lighthouseで見出し順の警告が消えればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- lang属性の未設定 — html要素にlang属性がない
- imgのalt属性エラー — alt属性が書かれていない
- tabindex の順序が期待通りにならない — tabindexの順序が期待通りにならない
- スタイルが反映されない — CSSファイルが読み込まれていない
- 画像が表示されない — 画像パスが間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説