セクション見出しを正しく付けると、読者は長いページでも内容の区切りと順序をつかみやすくなります。
画面を見て読む人は見出しを拾い読みでき、スクリーンリーダーを使う人は見出しの一覧や移動機能を手掛かりに目的の箇所を探せます。
ただし、大きく太い文字を置くだけではHTML上の見出しにならず、見出しタグを付けても本文との関係や階層が不適切なら、ページの構造は正しく伝わりません。
- WordPressの投稿タイトルをページの主見出しにする構成では、本文の主要な区切りを
<h2>から始めます。 - 見出しレベルは文字の大きさではなく、内容の親子関係で選びます。
- 見出しだけを順に読んでも、ページの概要が分かる文言にします。
- 自動チェックに加えて、見出し一覧と実際の読み進め方を人が確認します。
セクション見出しが担う役割
セクション見出しとは、ページ内のまとまりに名前を付け、後に続く内容の主題を示す見出しです。
W3CのWCAG 2.2の「情報及び関係性」では、見た目で伝えている構造や関係を、プログラムでも判別できるようにすることが求められています。
さらに、WCAG 2.2の「見出しとラベル」は、見出しがその箇所の主題や目的を説明することを求めています。
この二つは別の要件であり、「見出しタグを使うこと」と「分かりやすい見出しを書くこと」の両方が必要です。
- 内容を見渡せる：読者は本文を最初から全部読まなくても、見出しからページの構成を予測できます。
- 支援技術で移動しやすい：見出しがHTMLで正しく示されていれば、対応する支援技術が見出し一覧や見出し単位の移動に利用できます。
- 内容の区切りを共有できる：ブラウザーや検索エンジンなどにも、どの文章がどの見出しに属するかを伝えやすくなります。
ただし、見出しにキーワードを詰め込んでも、検索順位の向上を保証することはできません。
読者が内容を理解して目的の情報へ進める構造を優先します。
見出し構造を設計する五つの原則
内容の親子関係に沿って階層を決める
見出しレベルは、<h1>から<h6>までの数字で表す情報の階層です。
この投稿のようにWordPressのタイトルを<h1>として表示する構成では、本文の主要セクションを<h2>、その中の小見出しを<h3>にします。
テーマやページビルダーによって出力は異なるため、公開画面のHTMLも確認します。
<h2>見出し構造の基本</h2>
<h3>見出しレベルの選び方</h3>
<h3>見出し文の書き方</h3>
<h2>見出しの確認方法</h2>
<h3>自動チェック</h3>
<h3>手動チェック</h3><h2>の子に当たる項目は<h3>にし、<h2>から<h4>へ下がるような飛び級は避けます。
一方、<h3>の内容を終えて次の主要セクションへ移るときは、<h2>へ戻ってかまいません。
見た目ではなく意味でタグを選ぶ
文字を大きくしたいという理由で見出しレベルを選ぶと、表示上の強弱と情報の階層が食い違います。
文章がセクションの開始を示すなら見出し要素を使い、見た目の大きさや余白はCSSやテーマの設定で整えます。
反対に、強調したいだけの文章を見出しタグで囲むと、支援技術の見出し一覧に不要な項目が混ざります。
見出しだけで主題が分かる文言にする
短い見出しでも、後に続く内容を予測できなければ役割を果たしません。
「概要」や「詳細」のような語だけで済ませず、何の概要や詳細なのかを示します。
| 改善前 | 改善後 | 改善する理由 |
|---|---|---|
| はじめに | セクション見出しが必要な理由 | この節で扱う対象が分かる |
| ツール | WAVEで見出し構造を確認する | 手段と目的を予測できる |
| このセクションでは見出しの階層について説明します | 見出しレベルの選び方 | 案内文を主題に置き換えられる |
見出しと本文の内容を一致させる
「アクセシビリティ検証ツール」という見出しの下には、ツール名だけでなく、何を確認できるかと人が判断すべき点まで書きます。
一つの節に異なる話題が混ざった場合は、見出しを追加するか、内容を別の節へ移します。
見出しと本文の対応が明確なら、読者は目的の情報があるかを早い段階で判断できます。
深すぎる階層を作らない
<h4>から<h6>は、実際に三段階以上の親子関係がある場合に使います。
短い記事で細かな見出しを増やすと、内容の区切りより階層の把握に注意を使わせてしまいます。
節を分ける必要がなければ、段落や箇条書きで整理するほうが読みやすくなります。
スクリーンリーダー操作とTab操作の違い
スクリーンリーダーは、画面上の文字や要素の役割を音声や点字などで伝える支援技術です。
多くのスクリーンリーダーには、見出しを一覧表示したり、次の見出しへ移動したりする機能があります。
そのため、見出しのレベルと文言が適切なら、本文を一行ずつ読み進めなくてもページの全体像をつかめます。
一方、ブラウザーでTabキーを押したときに順番にフォーカスされるのは、通常、リンク、ボタン、フォーム部品などの操作要素です。
標準的な見出しは通常のTab移動先ではないため、「見出しを置けばTabキーだけで見出し間を移動できる」とは限りません。
キーボード操作への対応では、見出し構造とは別に、操作要素の順序、フォーカス表示、スキップリンクなどを確認します。
視覚的に隠す見出しを使う場面
見出しは目で見える状態にすると、画面を見て読む人にも構造が伝わります。
視覚的な配置だけで「目次」や「補助ナビゲーション」だと分かるものの、支援技術には名前が伝わらない場合に限り、見出しを視覚的に隠す方法を検討します。
<h2 class="visually-hidden">目次</h2>visually-hiddenやsr-onlyというクラス名を書くだけでは、見出しは隠れません。
プロジェクトで検証済みのCSSを用意し、見た目では隠れていても支援技術から利用できることを確認します。
display: none、visibility: hidden、HTMLのhidden属性は、支援技術からも内容を隠すため、この目的には使えません。
見える見出しを置ける場合は、視覚的に隠すよりも全員が同じ見出しを利用できる設計を優先します。
見出しを確認する手順
- 見出しだけを抜き出す：見出しの一覧を上から読み、ページの概要と階層を理解できるか確認します。
- 本文との対応を読む：各見出しの直後に、見出しが約束した内容が書かれているか確認します。
- キーボードで操作する：Tab移動の対象と順序を確認し、見出し移動と混同していないか点検します。
- スクリーンリーダーで試す：見出し一覧、見出しレベル、移動後に読み始める位置を確認します。
- 検証ツールを併用する：自動検出された問題を手掛かりにし、文言の適切さは人が判断します。
WAVEでは、ページ内の見出しと構造を視覚的に確認できます。
axe DevToolsはブラウザー上で自動検査を実行し、見出しを含むアクセシビリティ上の問題を探す助けになります。
自動検査だけでは、見出しが本文を正確に説明しているかや、ページ全体が理解しやすいかまでは判定できません。
公開前の見出しチェックリスト
- 投稿タイトルが公開画面で主見出しとして適切に出力されている
- 本文の主要セクションが
<h2>から始まっている - 下位の階層へ移るときに見出しレベルを飛ばしていない
- 文字の大きさを変える目的だけで見出しタグを使っていない
- 各見出しが後に続く内容を具体的に説明している
- 見出しだけを読んでもページの概要をつかめる
- 視覚的に隠す見出しが本当に必要かを確認している
- 自動検査と手動確認の両方を行っている
見出しからページの分かりやすさを整える
見出しは文字を目立たせる装飾ではなく、ページの内容を区切り、その関係を伝えるための要素です。
本文を書き始める前に見出しだけを並べると、話題の重複、説明の不足、階層のずれを見つけやすくなります。
公開後も見出し一覧、キーボード操作、スクリーンリーダー、自動検査の順に確かめ、読者が迷う箇所を修正します。
当社では、ウェブアクセシビリティへの取り組みを支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
導入方法や機能の詳細は、サービスページでご確認ください。