目次
はじめに
Webサイトをアクセシブル（誰でも使いやすい状態）にするために重要なのが、aria-label と aria-labelledby の使い方です。
特に <section> や <nav> などの “ランドマーク要素” に適切なラベルを付けることは、スクリーンリーダー利用者にとって「このブロックは何の役割なのか」を理解する大きな助けになります。
この記事では、HTMLでよく使う要素をすべて網羅しながら、
aria-label と aria-labelledby の使い分け、書き方、具体例 をまとめて解説します。
aria-label と aria-labelledby の違い
まずは2つの使い分けを明確にしておきます。
aria-label（ラベルをその場で直接書く）
- 要素に 読み上げ用の名前 を直接つける
- 視覚的には表示されない
- その名前はコード内に直接書くため、変更時にコード修正が必要
<section aria-label="お問い合わせセクション">aria-labelledby（別の要素をラベルとして参照する）※推奨
- ほとんどの場合こちらが推奨
- 多くは見出し（h2・h3）をラベルとして参照する
- 視覚的にも表示されるため、読み上げと見た目が一致してわかりやすい
<section aria-labelledby="contact-title">
<h2 id="contact-title">お問い合わせ</h2>aria-label を使うケース
次のような制約があるときに aria-label を使います。
- デザイン上、見出しを置けない
- ボタンやアイコンに補足説明が必要
- グラフィカルUIに名前を付けたい
- 視覚的にはシンプルにしたいが、読み上げでは意味を伝えたい
aria-labelledby を使うケース（推奨）
- セクションの見出しがある
- 既存のテキストをラベルにしたい
- 読み上げ内容と目視のタイトルを一致させたい
ほぼ全部の セクション構造（section / nav / form / aside / article）で推奨 です。
ランドマーク要素ごとの正しい使い方まとめ
headerタグ
通常はページ全体の先頭を示すため、ariaは不要。
複数存在する場合（例：article内のheader）には名前を付けてもよい。
<header aria-label="サイト共通ヘッダー"></header>navタグ
サイト内のナビゲーションを表すため、必ず名前を付けるのが推奨。
<nav aria-label="グローバルナビゲーション"></nav>複数ある場合（フッターナビ、SNSナビなど）にも効果的。
mainタグ
1ページに1つだけ。通常ラベル不要。
ただし特殊なケースでは付けても良い。
<main aria-label="メインコンテンツエリア"></main>sectionタグ
見出しがあるときは aria-labelledby が最適解！
<section aria-labelledby="about-title">
<h2 id="about-title">私たちについて</h2>
</section>見出しがない時だけ aria-label
迷ったら 見出しを付ければOK
<section aria-label="サービス概要">articleタグ
独立した内容なら、やはり見出し参照が推奨。
<article aria-labelledby="news-title-1">
<h3 id="news-title-1">最新のお知らせ</h3>asideタグ
補足情報ブロックなので、名前付けがとても有効。
<aside aria-label="関連記事"></aside>formタグ
フォームの目的名を付けるとアクセシビリティが向上。
<form aria-labelledby="contact-form-title">
<h2 id="contact-form-title">お問い合わせフォーム</h2>
</form>footerタグ
ページ全体のフッターは名前不要。
複数ある場合（カードのフッターなど）は付けても良い。
<footer aria-label="カードの補足情報"></footer>aria-label / aria-labelledby の使い分け 早見表
| 使う場所 | aria-label | aria-labelledby | 推奨 |
|---|---|---|---|
| section | △（見出しなし） | ◎（見出し参照） | labelledby |
| nav | ◎ | ◎ | どちらでもOK |
| form | △ | ◎ | labelledby |
| article | △ | ◎ | labelledby |
| aside | ◎ | ◎ | 目的に応じて |
| header | △ | △ | 不要な場合も多い |
| footer | △ | △ | 不要な場合も多い |
実践例：A型サービス紹介ページの正しい構造
実際の制作現場でよくある構造を例にします。
<section id="a-type-intro" aria-labelledby="a-type-intro-title">
<h2 id="a-type-intro-title">就労継続支援A型とは</h2>
<p>一般企業での就労が難しい方に働く機会を提供する福祉サービスです。</p>
</section>あなたのように Web制作現場で複数のページ構成を持つサイトでは、
全セクションに適切な aria を付けるだけでアクセシビリティが一気に向上 します。
まとめ
- aria-label は 直接ラベルを付ける
- aria-labelledby は 見出しをラベルとして参照する（推奨）
- section / nav / form / article / aside には積極的に使える
- 見出しのあるセクションでは aria-labelledby が“正解”
- 迷ったら「見出し＋aria-labelledby」を基本にする
アクセシビリティは「入れておいた方が SEO 的にも評価されやすい」傾向があります。