見出し階層の「順序」はなぜ重要か？――アクセシビリティを「義務」から「武器」へ変える設計術
現場でコードレビューをしていると、`
`の直後に突然`
`が来るようなマークアップを時折見かけます。実装担当者に聞くと「CSSで文字サイズを調整すればいいから、タグは適当でいいと思ってた」という答えが返ってくる。
耳が痛い話かもしれませんが、結論から言います。その考え方、今日で捨てましょう。
フロントエンドエンジニアにとって、見出しタグ（`h1`〜`h6`）は単なる「文字を大きくする道具」ではありません。それは、検索エンジンと支援技術（スクリーンリーダー）に対して「このドキュメントはどういう階層で構成されているか」を伝える、唯一無二のロードマップなのです。
ブラウザとアクセシビリティツリーの「裏側」
ブラウザはHTMLをパースする際、DOMツリーとは別に「アクセシビリティツリー」という独自の木構造を構築します。スクリーンリーダーを使っているユーザーは、このツリーを頼りにページ内を移動します。
例えば、`
`の次に`
`がいきなり現れると、彼らのデバイスは「えっ、`
`はどこ？ 読み飛ばしたのか？」と混乱します。これは、晴眼者がWebサイトを見るときに、メニューからいきなり項目が飛んでいるような違和感を与えます。
Lighthouseやaxe-coreが「Heading levels should only increase by one（見出しレベルは1つずつ増やすべき）」と警告を出すのは、単なるお節介ではなく、「構造の断絶」を防ぐための生存戦略なのです。
実践：見出し階層をバリデーションする思考法
では、現場でどうやってこの「階層の崩れ」を検知し、防げばいいのか。まずはLighthouseのレポートを眺めるのが第一歩ですが、開発段階で「構造」を可視化するコードを書いてみましょう。
以下は、ブラウザのコンソールに現在の見出し構造を視覚的に出力するスクリプトです。デバッグ時に重宝します。
/
- 現在のページの見出し構成を階層的にコンソール出力する
- 開発中の「構造チェック」にコピペして使ってください
/
const validateHeadings = () => {
const headings = Array.from(document.querySelectorAll(‘h1, h2, h3, h4, h5, h6’));
console.group(‘— 文書構造チェック：見出し階層の可視化 —‘);
headings.forEach((h, index) => {
const level = parseInt(h.tagName.replace(‘H’, ”));
const prev = headings[index – 1];
const prevLevel = prev ? parseInt(prev.tagName.replace(‘H’, ”)) : 0;
// 前の見出しとの階層差をチェック
const isInvalid = prev && (level > prevLevel + 1);
const indent = ‘ ‘.repeat(level – 1);
const status = isInvalid ? ‘⚠️ 警告: 階層スキップ発生!’ : ‘✅ OK’;
console.log(`${indent}${h.tagName} (${h.textContent.trim().substring(0, 20)}…) – ${status}`);
});
console.groupEnd();
};
// コンソールで実行
validateHeadings();
「見た目」と「構造」を分離するプロの流儀
「デザイン通りに組むと、どうしても見出し順序が守れないんだよ」という悩みもよく聞きます。ですが、それはHTMLの役割をCSSに押し付けすぎている証拠です。
ベストプラクティスは、「HTMLは構造のためだけに使い、スタイルはクラス名で制御する」こと。
メインのタイトル
メインのタイトル
`h1` 〜 `h6` は、あくまで文書の骨格です。デザイン上のフォントサイズがどうであれ、適切なタグを配置する。その上で、`h1` に `font-size: 1.5rem` を当てるなり、ユーティリティクラスを当てるなりして、見た目を調整する。これが、保守性が高く、SEOにもアクセシビリティにも強い「現場で戦えるコード」の条件です。
最後に：自動化を過信しない
axe-coreのようなツールは強力ですが、あくまで「機械的な順序」をチェックしているに過ぎません。
本当に重要なのは、「ユーザーがこの見出しを辿って、コンテンツの内容を正しく理解できるか？」という、人間による文脈の検証です。ツールで警告が出ないことをゴールにするのではなく、「論理的な構造を組み立てることで、誰にとっても読みやすい体験を作る」という意識を、明日からのコーディングに加えてみてください。
もし、この記事を読んだあなたが今、自分の書いたコードに不安を感じたなら、それは成長の証です。さあ、エディタを開いて、まずは `
コメント