2.4.6 見出し及びラベル

要件

コンテンツに対して見出しやラベルがある場合、それらは内容や目的を正確に伝えるものでなければならない。

内容のポイント

項目	説明
見出し（Heading）	セクション構造を示すもの（例：<h1>〜<h6>）
ラベル（Label）	入力欄や操作対象の目的を伝える文言（例：<label>要素）
適切とは？	内容や目的が具体的に分かる言葉であること（例：「名前を入力」など）

OK 例

要素	適切な例
見出し	<h2>製品仕様</h2>, <h3>ご注文方法</h3>
ラベル	＜label for=”email”＞メールアドレス＜/label＞

NG 例

要素	不適切な例	理由
見出し	<h2>こちら</h2>	内容が不明瞭
ラベル	<label>入力してください</label>	何を入力するのか分からない
ラベルなし	<input type="text" />	スクリーンリーダーでは意味不明

具体例

フォーム画面

• NG：<label>ここに入力</label>
• OK：<label for=”company”>会社名</label>

見出し

• NG：<h2>続きはこちら</h2>
• OK：<h2>製品の詳細情報</h2>

達成のための実装チェックリスト

チェック項目	内容
見出しが論理構造に沿っているか？	h1 → h2 → h3… の階層が正しい
ラベルが明確に入力欄の目的を示しているか？	項目ごとに固有のラベルを
プレースホルダのみで目的を示していないか？	<input placeholder="名前">だけでは不十分
音声読み上げでもラベルが意味を伝えているか？	スクリーンリーダー対応を考慮

利点

• 内容が明確で構造的になり、情報を素早く探せる
• スクリーンリーダーでも項目の意味を正確に把握可能
• ユーザーの認知負荷を軽減し、操作性が向上

まとめ

項目	内容
達成基準	2.4.6 見出し及びラベル
レベル	AA
主な対象	見出し構造、フォーム入力
要件	意味や目的が分かるように適切な文言で示す
効果	構造的な理解・視認性・可読性・操作性の向上

この基準は、サイトのナビゲーション性と操作性の基盤となるものです。
特にフォームのUI設計や記事のセクション設計において、「誰が見ても分かる文言・構造」を意識することが、ユーザビリティだけでなくアクセシビリティの品質向上にも直結します。

一覧に戻る