WCAG 2.2 ガイドライン「2.4.6 見出しとラベル」Level AA について

はじめに

WCAG 2.2の「2.4.6 見出しとラベル」は、見出しやラベルがそのセクションや要素のトピックや目的を明確に説明することを求めています。この基準は、ユーザーがコンテンツを迅速に理解し、必要な情報を見つけやすくすることを目的としています。

1. 基準の概要

要件

• 見出しは、コンテンツのトピックを簡潔かつ明確に表現する。
• ラベルは、ユーザーが入力する情報や選択肢の目的を明確に説明する。

2. 実装方法

a. 見出しを適切に設定する

見出しの例

HTML

<h1>お問い合わせ</h1>
<section>
  <h2>電話でのお問い合わせ</h2>
  <p>電話番号はこちらです。</p>
</section>
<section>
  <h2>メールでのお問い合わせ</h2>
  <form>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <button type="submit">送信</button>
  </form>
</section>

• 各セクションに適切な見出しを設定することで、内容が明確になり、ナビゲーションが容易になります。

不適切な例

<h1>お問い合わせ</h1>
<section>
  <h2>方法1</h2>
  <p>電話番号はこちらです。</p>
</section>
<section>
  <h2>方法2</h2>
  <form>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <button type="submit">送信</button>
  </form>
</section>

• 「方法1」「方法2」という見出しは、内容の具体性が欠けています。

b. ラベルを適切に設定する

ラベルの例

HTML

<form>
  <label for="name">お名前:</label>
  <input type="text" id="name" name="name">

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">

  <button type="submit">送信</button>
</form>

• 各入力フィールドに適切なラベルを提供することで、ユーザーが入力する情報を正確に理解できます。

ARIAを使用した例

HTML

<form>
  <div aria-label="お名前入力フォーム">
    <input type="text" placeholder="お名前">
  </div>
  <div aria-label="メールアドレス入力フォーム">
    <input type="email" placeholder="メールアドレス">
  </div>
  <button type="submit">送信</button>
</form>

• aria-labelを使用して、視覚的に見えないラベルも補足できます。

c. コンテキストに適した説明を付ける

補足情報を提供

HTML

<form>
  <label for="password">パスワード (8文字以上):</label>
  <input type="password" id="password" name="password">
</form>

• ラベルに必要な入力要件（例: 「8文字以上」）を記載して、ユーザーが正しい情報を入力できるようにします。

3. よくある失敗例とその改善策

a. 見出しが具体的でない

失敗例

<h2>セクション1</h2>
<p>ここには情報が含まれます。</p>

改善策

<h2>製品の特徴</h2>
<p>このセクションには製品の詳細な特徴が記載されています。</p>

b. ラベルが不足している

失敗例

<form>
  <input type="text" placeholder="名前を入力">
  <input type="email" placeholder="メールアドレスを入力">
  <button type="submit">送信</button>
</form>

問題点

• スクリーンリーダーではプレースホルダーが十分な説明として認識されない場合があります。

改善策

<form>
  <label for="name">お名前:</label>
  <input type="text" id="name" name="name">

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
</form>

4. アクセシビリティのメリット

a. ユーザー体験の向上

• 明確な見出しやラベルは、コンテンツを簡単に理解できるため、ユーザー満足度が向上します。

b. スクリーンリーダー利用者への配慮

• 適切に設定された見出しやラベルは、スクリーンリーダーで正確に読み上げられ、情報へのアクセスを容易にします。

c. 入力ミスの軽減

• 明確なラベルにより、ユーザーは正確な情報を入力しやすくなります。

5. テスト方法

a. 手動テスト

1. ページ内の見出しが内容に対応しているか確認。
2. 入力フィールドに対応するラベルが正しく設定されているか確認。

b. スクリーンリーダーテスト

• スクリーンリーダーを使用して、見出しやラベルが適切に読み上げられるか確認。

c. 自動テストツール

• AxeやWAVEなどのツールを使用して、見出しやラベルの適切性を検証。

まとめ

WCAG 2.2の「2.4.6 見出しとラベル」は、コンテンツや要素の目的をユーザーに明確に伝えることを目的としています。

実装ポイント

1. 見出しは具体的かつ簡潔に記述する。
2. ラベルを適切に設定し、入力要件を明確にする。
3. ARIA属性を補助的に使用して、追加情報を提供する。

これにより、すべてのユーザーにとって使いやすく、アクセス可能なウェブコンテンツを提供できます。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。