セマンティックHTMLは、Webページの各部分に「これは見出し」「これはナビゲーション」「ここが本文」といった意味を持たせる書き方です。見た目を整えるだけでなく、ブラウザ、検索エンジン、スクリーンリーダーなどの支援技術がページ構造を理解しやすくなります。
Webアクセシビリティを高めたいとき、色や文字サイズの調整だけに目が向きがちです。しかし、土台になるHTMLの構造が曖昧だと、見た目では整っていても、キーボード操作や読み上げでは使いにくいページになります。この記事では、セマンティックHTMLの基本、よく使う要素、実装時の注意点を整理します。
セマンティックHTMLとは
セマンティックHTMLとは、内容の意味に合ったHTML要素を選んでマークアップすることです。たとえば、ページ上部には<header>、主要なナビゲーションには<nav>、本文の中心には<main>、ページ下部には<footer>を使います。
反対に、すべてを<div>や<span>で囲み、CSSだけで見た目を作ると、ページの意味がHTMLから読み取りにくくなります。見た目は同じでも、支援技術やブラウザに伝わる情報は大きく変わります。
Webアクセシビリティの基本を考えるうえでも、まずHTMLの構造を整えることは重要な出発点です。
なぜアクセシビリティ向上につながるのか
セマンティックHTMLが役立つ理由は、ページの構造を機械にも人にも伝えやすくするからです。とくにスクリーンリーダーを使うユーザーは、見出し、ランドマーク、リンク、フォーム項目などを手がかりにページ内を移動します。HTMLの意味が正しく付いていれば、必要な情報にたどり着きやすくなります。
- 支援技術に伝わりやすい: 見出し、ナビゲーション、本文、フッターなどの区切りが把握しやすくなります。
- ページを移動しやすい: 見出しジャンプやランドマーク移動を使うユーザーが、目的の場所を探しやすくなります。
- 保守しやすい: 要素の役割が明確になり、制作者が後から見ても構造を理解しやすくなります。
- 検索エンジンの理解を助ける: 本文、見出し、リストなどの構造が整理され、ページ内容を読み取る手がかりになります。ただし、順位向上を保証するものではありません。
スクリーンリーダーの仕組みを先に押さえたい場合は、スクリーンリーダーの基本解説も参考になります。
よく使うセマンティック要素
まずは、ページ全体の骨組みに関わる要素から確認します。すべてを一度に覚える必要はありません。どの部分が「案内」で、どの部分が「本文」で、どの部分が「補足」なのかを考えながら選ぶと判断しやすくなります。
| 要素 | 主な役割 | 使いどころ |
|---|---|---|
<header> |
ページやセクションの導入部 | サイト名、ロゴ、導入文、上部のナビゲーション周辺 |
<nav> |
主要なナビゲーション | グローバルメニュー、ページ内メニュー、フッター内の主要リンク |
<main> |
ページ固有の主要コンテンツ | 記事本文、商品説明、問い合わせページの中心部分 |
<article> |
単独で成り立つ内容 | ブログ記事、ニュース本文、カード型の記事一覧の各項目 |
<section> |
見出しを持つ内容のまとまり | 章やテーマごとの区切り |
<footer> |
ページやセクションの締めくくり | 著作権表示、補足リンク、問い合わせ情報 |
基本の構造例
以下は、記事ページの大まかな構造例です。実際のページではデザインやCMSの仕様に合わせて調整しますが、役割の分け方はこのように考えます。
<header>
<p>サイト名</p>
<nav aria-label="主なナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/services/">サービス</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>記事タイトル</h1>
<p>記事の導入文</p>
<h2>最初の見出し</h2>
<p>本文</p>
</article>
</main>
<footer>
<p>お問い合わせ先や補足リンク</p>
</footer>WordPressの記事本文では、ページタイトルがH1として出力されることが多いため、本文内ではH2から始めるのが基本です。同じページの中にH1を重ねる必要があるかどうかは、テーマの出力構造を確認して判断します。
実装時に押さえたいポイント
見た目ではなく役割で要素を選ぶ
太字にしたいから<strong>を使う、余白を作りたいから<section>を使う、という判断は避けます。要素は見た目ではなく意味で選びます。強調したい内容には<strong>や<em>、箇条書きには<ul>や<ol>、本文の章には適切な見出しを使います。
見出し階層を飛ばさない
見出しは、読者が記事の地図として使う要素です。H2の下に細かい項目を置くならH3、さらに細分化するならH4というように、順番に階層を作ります。見た目を大きくしたいだけの理由で、H2からH4へ飛ばすような使い方は避けます。
ARIAは不足分を補うために使う
ARIAは、HTMLだけでは役割や名前が伝わりにくい場合に補足するための属性です。たとえば、複数の<nav>がある場合にaria-label="主なナビゲーション"やaria-label="フッターナビゲーション"を付けると、区別しやすくなります。
ただし、ARIAを足せば何でも解決するわけではありません。まずはネイティブなHTML要素で意味を表せるかを確認し、それでも足りない場合にARIAで補う、という順番で考えると安全です。
視覚的な表現だけに頼らない
色、サイズ、配置だけで意味を伝えると、画面を見ないユーザーや表示環境が異なるユーザーには意図が伝わりにくくなります。重要な情報は、見出し、リスト、リンクテキスト、ボタン名など、HTMLとテキストでも理解できる形にします。
悪い例と改善例
HTMLの使い方は、見た目が同じでもアクセシビリティに差が出ます。たとえば、クリックできる見た目を<div>で作るより、操作の役割に合った<button>や<a>を使うほうが、キーボード操作や支援技術に伝わりやすくなります。
<!-- 避けたい例：役割がHTMLから伝わりにくい -->
<div class="button" onclick="submitForm()">送信</div>
<!-- 改善例：操作の役割が伝わる -->
<button type="submit">送信</button>より具体的な比較は、Webアクセシビリティを高めるHTMLの良い例と悪い例でも整理しています。
チェックリスト
- ページ本文の中心が
<main>で分かる構造になっているか。 - 主要なナビゲーションに
<nav>を使っているか。 - 見出しがH2、H3、H4の順に自然につながっているか。
- 箇条書きに
<ul>や<ol>を使っているか。 - リンクテキストだけで移動先の内容が分かるか。
- ボタンやリンクを、見た目だけでなくHTMLの役割として表現しているか。
- ARIAを使う前に、適切なHTML要素で表現できないか確認したか。
まとめ
セマンティックHTMLは、Webアクセシビリティを高めるための基本です。ページの見た目を整える前に、見出し、本文、ナビゲーション、フッター、リスト、リンク、ボタンの役割をHTMLで正しく表すことで、より多くのユーザーが内容を理解しやすくなります。
まずは既存ページの見出し階層、<main>や<nav>の有無、リンクテキスト、ボタンのマークアップから確認すると始めやすくなります。小さな修正でも、ページ全体の読みやすさと保守性の改善につながります。
当社では、Webアクセシビリティ対応を始めやすくするためのUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上に関心がある方は、詳細をご覧ください。