セクション見出しは、ウェブページの話題を区切り、それぞれの関係を示すための目印です。
文字を大きく見せる装飾ではなく、ページの構造を人と支援技術の両方に伝える役割があります。
適切な見出しがあれば、読者は本文を最初から読み続けなくても、必要な情報がありそうな場所を見つけられます。
見出しのレベル、文言、本文との対応を順に確認すれば、読みやすさと操作のしやすさをまとめて改善できます。
セクション見出しが果たす役割
見出しは、長いページを意味のあるまとまりに分けます。
その効果は、見た目を整えることだけではありません。
- 内容を見渡しやすくする：見出しを追うだけで、ページに何が書かれているかを把握しやすくなります。
- 目的の箇所を探しやすくする：読者は関心のある見出しを手掛かりに、不要な箇所を読み飛ばせます。
- 支援技術に構造を伝える：スクリーンリーダーは画面上の文字を音声や点字で伝える支援技術で、見出しの一覧表示や見出し間の移動に対応するものがあります。
見出しは検索エンジンが内容のまとまりを理解する手掛かりにもなります。
ただし、見出しを整えるだけで検索順位が上がると保証できるわけではないため、読者に内容を正確に伝えることを優先します。
見出しレベルは内容の親子関係で決める
HTMLには、h1からh6までの見出し要素があります。
数字は文字の大きさを指定するものではなく、ページ全体の題名、主要な話題、その内側の話題という親子関係を表します。
| 見出し | 役割 | 記事本文での使い方 |
|---|---|---|
h1 |
ページ全体の主題 | WordPressの投稿タイトルをh1として出力する構成では、本文内に重ねて置きません。 |
h2 |
主要なセクション | 本文の大きな話題を区切ります。 |
h3 |
h2の内側にあるサブセクション | 一つの主要セクションを細分化するときに使います。 |
h4からh6 |
さらに深いサブセクション | 実際に内容が入れ子になる場合だけ使います。 |
たとえば、本文を次のように組み立てると、二つの主要セクションと、その内側の話題が明確になります。
<h2>見出しが必要な理由</h2>
<p>見出しが読者を助ける仕組みを説明します。</p>
<h3>スクリーンリーダーでの移動</h3>
<p>見出しを使った移動方法を説明します。</p>
<h3>目で見て探すときの手掛かり</h3>
<p>視覚的な区切りの役割を説明します。</p>
<h2>見出しの確認方法</h2>
<p>公開前の確認手順を説明します。</p>下位の話題へ進むときに、h2の直後をh4にするような飛ばし方は避けます。
一方、h4のサブセクションを終えて次の主要セクションへ移るためにh2へ戻ることは、構造上の問題ではありません。
見出しの文字サイズを変えたい場合は、見出しレベルを変えるのではなく、サイトのデザイン側で調整します。
小さく見せたいからh4を選ぶという決め方では、見た目と文書構造が食い違います。
見出し文言と本文を一致させる
見出しを読んだ時点で、その直後に何が書かれているかを予測できる文言にします。
「詳細」「その他」のように対象が分からない表現や、本文の説明を一文のまま詰め込んだ表現は避けます。
| 避けたい表現 | 書き換え例 | 改善点 |
|---|---|---|
| このセクションでは基本的な原則について説明します | ウェブアクセシビリティの基本原則 | 扱う対象を短く示せます。 |
| ツールについて | 見出し構造を確認するツール | 何を確認するツールかが分かります。 |
| その他 | 視覚的に隠した見出しの使い方 | セクション固有の内容を示せます。 |
文言を具体的にしても、本文が別の話題を扱っていれば読者は迷います。
見出しを直すときは、その下の段落やリストが見出しへの答えになっているかも確認します。
見出しはHTML要素で実装する
太字や大きな文字で見出しらしく見せても、HTML上で通常の段落のままなら、支援技術が見出しとして扱えないことがあります。
反対に、文字を大きくする目的だけで見出し要素を使うと、実際には存在しないセクションがあるように伝わります。
文章の区切りにはh2やh3を使い、見た目はサイトのデザインで整えます。
意味と見た目を分けて考えると、画面の表示が変わっても文書構造を保てます。
視覚的に隠す見出しは必要な場面だけで使う
画面には表示せず、支援技術には見出しとして伝える実装を視覚的に隠した見出しと呼びます。
目次などのまとまりに見出しが必要でも、画面上では同じ説明が繰り返される場面で使われることがあります。
<h2 class="sr-only">目次</h2>sr-onlyはHTMLに組み込まれた機能名ではなく、サイト側で用意するクラス名です。
この例を使う前に、見た目だけを隠し、読み上げ対象には残す設定がテーマやスタイルシートに実装されているかを確認します。
非表示の方法によっては、画面からだけでなく支援技術からも見出しが消えます。
見出しを表示しても不自然でない場合は、すべての読者が利用できる見える見出しを優先します。
見出しとキーボード移動を分けて考える
見出しを適切に置いても、それだけで見出しがTabキーの移動先になるわけではありません。
Tabキーは主にリンク、ボタン、フォーム部品などの操作できる要素へフォーカスを移すために使います。
スクリーンリーダー利用者は、その環境が備える見出し一覧や見出し間移動の機能を使えます。
一方、キーボードだけで操作する利用者への対応では、見出しに加えて、スキップリンク、論理的なフォーカス順序、見失いにくいフォーカス表示などを別に確認します。
確認項目の違いは、キーボード操作とフォーカス表示の実務で詳しく整理しています。
公開前に見出し構造を確認する
自動チェックと人による確認は、見つけられる問題が異なります。
次の順に確認すると、HTMLの誤りだけでなく、見出し文言の分かりにくさも見つけやすくなります。
- 見出しだけを並べる：ページタイトル、h2、h3の順で読み、内容の全体像が伝わるか確認します。
- レベルの流れを見る：下位へ進むときにレベルを飛ばしていないか、同じ階層の話題に同じレベルを使っているか確認します。
- 見出しと本文を照合する：各見出しの直後に、その見出しが示した内容が書かれているか確認します。
- 実際の操作を試す：スクリーンリーダーの見出し一覧や見出し間移動を試し、Tabキーでは操作できる要素の順序とフォーカス表示を確認します。
- チェックツールを併用する：WAVEやaxeなどで見出し構造を調べます。ツールの選び方はウェブアクセシビリティチェックツールのガイドも参考にしてください。
ツールが警告を出さなくても、曖昧な見出しや本文との不一致が残る場合があります。
最後は見出しだけを読む人の立場で、目的の情報を探せる構造になっているかを確かめます。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールをご案内しています。
サイトのアクセシビリティ改善を検討している方は、リンク先で詳細をご覧ください。