コンテンツの目的を明確に伝える見出しとラベル

このガイドラインで目指すこと

見出しとラベルがコンテンツの目的を明確に伝えることで、ユーザーが情報を効率的に理解し、必要な情報へ素早くアクセスできるようにします。

• スクリーンリーダーユーザーがページ構造を把握できる
• 認知的な負荷を軽減し、必要な情報を素早く見つけられる

このガイドラインが達成されないとどうなるか

注意

見出しやラベルが不明確だと、ユーザーはコンテンツの内容を理解するのに時間がかかり、必要な情報を見つけられない可能性があります。

結果的に、特にスクリーンリーダーを使用するユーザーは、ページ全体を読まなければ内容を把握できず、非常に非効率になります。

具体例：設定画面での困りごと

Fさんはスクリーンリーダーを使用しています。 あるアプリの設定画面で、「設定1」「設定2」「設定3」という見出しが使われていました。 各設定が何を意味するのか分からず、すべてのセクションを読み上げて確認する必要がありました。

こんなとき、達成されていないかもしれません

• 見出しが「セクション1」「項目A」など、内容を説明していない
• フォームのラベルが「入力欄」「テキスト」など曖昧
• ボタンが「こちら」「クリック」など目的が不明
• 見出しの階層構造が論理的でない（h1の次にh4があるなど）
• 同じページに同じ見出しが複数ある

実装例での比較

以下のデモで見出しとラベルの違いを確認してください。

悪い例: 見出しとラベルが不明確

demo.html

demo.css

<article>
  <h1>お知らせ</h1>
  <section>
    <h3>項目1</h3>
    <p>内容がここに入ります。</p>
  </section>
  <section>
    <h3>項目2</h3>
    <p>別の内容がここに入ります。</p>
  </section>

  <form>
    <div class="field">
      <label>入力欄</label>
      <input type="text" />
    </div>
    <div class="field">
      <label>入力欄</label>
      <input type="email" />
    </div>
    <button>送信</button>
  </form>
</article>

Open Sandbox

良い例: 見出しとラベルが明確

demo.html

demo.css

<article>
  <h1>2024年11月のお知らせ</h1>
  <section>
    <h2>システムメンテナンスのお知らせ</h2>
    <p>11月15日 午前2時から4時までメンテナンスを行います。</p>
  </section>
  <section>
    <h2>新機能リリースのお知らせ</h2>
    <p>ダークモードが利用可能になりました。</p>
  </section>

  <form aria-labelledby="form-title">
    <h2 id="form-title">お問い合わせフォーム</h2>
    <div class="field">
      <label for="name">お名前（必須）</label>
      <input type="text" id="name" required />
    </div>
    <div class="field">
      <label for="email">メールアドレス（必須）</label>
      <input type="email" id="email" required />
    </div>
    <button type="submit">お問い合わせを送信</button>
  </form>
</article>

Open Sandbox

最低限、すぐに取り組めること

要件定義

• 見出しとラベルのガイドラインを定義する
• 見出しはコンテンツの内容を説明する具体的な文言にする

デザイン

• 見出しの階層構造を視覚的に設計する
• フォームのラベルは入力内容を明確に示す
• ボタンは動作を説明するラベルにする

良い見出し・ラベルの例

demo.html

demo.css

<div class="examples">
  <div class="example">
    <h3>見出しの例</h3>
    <ul>
      <li><strong>良い:</strong> 「2024年の売上レポート」</li>
      <li><strong>悪い:</strong> 「レポート」</li>
    </ul>
  </div>
  <div class="example">
    <h3>フォームラベルの例</h3>
    <ul>
      <li><strong>良い:</strong> 「メールアドレス」</li>
      <li><strong>悪い:</strong> 「入力欄1」</li>
    </ul>
  </div>
  <div class="example">
    <h3>ボタンの例</h3>
    <ul>
      <li><strong>良い:</strong> 「注文を確定する」</li>
      <li><strong>悪い:</strong> 「OK」「送信」</li>
    </ul>
  </div>
</div>

Open Sandbox

開発

• 見出しは論理的な階層構造（h1→h2→h3）を維持する
• フォームのlabel要素とinputをfor属性で関連付ける
• ボタンには動作を説明するテキストを含める

適切な見出し構造の例

<h1>商品カタログ</h1>
  <h2>電化製品</h2>
    <h3>テレビ</h3>
    <h3>オーディオ</h3>
  <h2>家具</h2>
    <h3>ソファ</h3>
    <h3>テーブル</h3>

QA

• スクリーンリーダーで見出しの一覧を確認する
• 見出しだけでページの内容が理解できるか確認する
• フォームのラベルが入力内容を適切に説明しているか確認する

リリース後

• ユーザーからのフィードバックを収集する
• 分かりにくい見出しやラベルを改善する

よくある問題と解決方法

見出しの階層構造が崩れている

危険

見出しレベルをスキップすると、スクリーンリーダーユーザーは構造を理解しにくくなります。

悪い例：見出しレベルのスキップ

<h1>ページタイトル</h1>
<h4>セクション1</h4> <!-- h2, h3をスキップ -->
<h2>セクション2</h2>

良い例：論理的な階層構造

<h1>ページタイトル</h1>
<h2>セクション1</h2>
<h3>サブセクション1-1</h3>
<h2>セクション2</h2>

「こちら」「クリック」などの曖昧なリンク

リンクテキストは、リンク先の内容が分かるようにする必要があります。

悪い例

<p>詳細は<a href="/guide">こちら</a>をご覧ください。</p>

良い例

<p><a href="/guide">利用ガイド</a>をご覧ください。</p>
<!-- または -->
<p>詳細は<a href="/guide">利用ガイドのページ</a>をご覧ください。</p>

同じラベルが複数ある

同じページに同じラベルのボタンが複数あると、どれを押すべきか分かりません。

demo.html

demo.css

<div class="cart-demo">
  <h3>悪い例</h3>
  <div class="cart-item">
    <span>商品A</span>
    <button>削除</button>
  </div>
  <div class="cart-item">
    <span>商品B</span>
    <button>削除</button>
  </div>

  <h3>良い例</h3>
  <div class="cart-item">
    <span>商品A</span>
    <button aria-label="商品Aを削除">削除</button>
  </div>
  <div class="cart-item">
    <span>商品B</span>
    <button aria-label="商品Bを削除">削除</button>
  </div>
</div>

Open Sandbox

チェックリスト

必須チェック項目

• 見出しがコンテンツの内容を正確に説明している
• 見出しの階層構造が論理的である（h1→h2→h3の順）
• フォームのラベルが入力内容を明確に示している
• ボタンやリンクのテキストが目的を説明している

推奨項目（中優先度）

• 見出しだけでページの概要が理解できる
• 同じページに同じ見出しが重複していない
• 「こちら」「クリック」などの曖昧なリンクテキストがない

関連するWCAG達成基準

• WCAG 2.2 達成基準 2.4.6 見出し及びラベル（レベルAA）

知っておくと便利なこと

スクリーンリーダーでの見出しナビゲーション

スクリーンリーダーは見出しの一覧を表示する機能があります。ユーザーは見出し間をジャンプしてページを素早く把握できます。

キー	動作（NVDA/JAWS）
H	次の見出しへ移動
Shift + H	前の見出しへ移動
1〜6	指定レベルの見出しへ移動

aria-label と aria-labelledby

視覚的なラベルを変更せずに、スクリーンリーダー向けに説明を追加できます。

aria-labelの使用例

<!-- アイコンのみのボタン -->
<button aria-label="メニューを開く">
  <svg>...</svg>
</button>

<!-- 複数の同名ボタンを区別 -->
<button aria-label="商品Aを削除">削除</button>
<button aria-label="商品Bを削除">削除</button>

aria-labelledbyの使用例

<section aria-labelledby="section-title">
  <h2 id="section-title">お知らせ</h2>
  <p>内容...</p>
</section>

見出しレベルの選び方

見出しレベル	用途
h1	ページのメインタイトル（通常1つ）
h2	主要なセクション
h3	h2内のサブセクション
h4〜h6	さらに細かい階層

参考資料

WCAGガイドライン

• WCAG 2.2 達成基準 2.4.6 見出し及びラベル - 英語公式ガイド
• 解説書 達成基準 2.4.6: 見出し及びラベル | WAI | W3C - 日本語版

技術的リソース

• MDN: 見出し要素 - HTML見出し要素の解説
• MDN: label要素 - フォームラベルの使い方
• WAI: ページ構造チュートリアル - W3C公式のページ構造ガイド