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