WCAG 2.2 ガイドライン「3.3.2 ラベルまたは指示」Level A について

はじめに

WCAG 2.2の「3.3.2 ラベルまたは指示」は、ユーザー入力が求められる場合に、適切なラベルや指示を提供することを求めています。この基準は、ユーザーがフォームやインターフェイスを正しく理解し、使用できるようにするために重要です。

1. 基準の概要

要件

• 入力が必要なフィールドにラベルを明示的に付けること。
• 入力方法や形式について指示を提供すること。
• ラベルや指示が明確で分かりやすい形で表示されていること。

対象となる場面

• フォームフィールド（例: 名前、メールアドレス、電話番号）
• 特定のフォーマットが必要な入力（例: yyyy/mm/dd形式の日付）
• 複数のフィールドが関連している場合（例: 住所フィールド）

2. 実装方法

a. ラベルの提供

入力フィールドには明確で具体的なラベルを提供し、<label>要素を使用してフィールドと関連付けます。

例: 名前フィールドのラベル

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

b. 必須フィールドの明示

必須フィールドであることを示すテキストや記号をラベルに追加します。

例: 必須フィールドの表示

<form>
  <label for="email">メールアドレス (必須):</label>
  <input type="email" id="email" name="email" aria-required="true">
</form>

c. 入力形式の指示

期待される入力形式や例を提供します。

例: 日付の入力形式を説明

<form>
  <label for="date">生年月日 (yyyy/mm/dd):</label>
  <input type="text" id="date" name="date" placeholder="例: 1990/01/01">
</form>

d. グループ化されたフィールドの説明

複数のフィールドが関連している場合、<fieldset>と<legend>を使用して説明を追加します。

例: 住所フィールドのグループ化

<form>
  <fieldset>
    <legend>住所情報</legend>
    <label for="street">住所:</label>
    <input type="text" id="street" name="street"><br>
    <label for="city">市区町村:</label>
    <input type="text" id="city" name="city">
  </fieldset>
</form>

e. 支援技術のための属性

スクリーンリーダーを考慮し、ARIA属性を使用してラベルや説明を提供します。

例: aria-describedby を使用した説明

<form>
  <label for="phone">電話番号:</label>
  <input type="tel" id="phone" name="phone" aria-describedby="phone-format">
  <small id="phone-format">例: 090-1234-5678</small>
</form>

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

a. フォームの理解が向上

• 明確なラベルや指示により、ユーザーは入力の意図や必要な形式を簡単に理解できます。

b. ユーザーエラーの削減

• 入力形式や必須フィールドを示すことで、誤入力が減少します。

c. 支援技術との互換性

• ラベルや指示が正しく関連付けられていると、スクリーンリーダーが正確な情報をユーザーに提供できます。

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

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

失敗例

<form>
  <input type="text" name="name">
</form>

改善策

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

b. 必須フィールドの説明がない

失敗例

• 必須項目であることが明記されていない。

改善策

<label for="email">メールアドレス (必須):</label>
<input type="email" id="email" name="email" aria-required="true">

c. 入力形式の指示が不明確

失敗例

• ユーザーがどの形式で入力すればよいか分からない。

改善策

<label for="date">生年月日 (yyyy/mm/dd):</label>
<input type="text" id="date" name="date" placeholder="例: 1990/01/01">

5. テスト方法

a. 手動テスト

1. 各入力フィールドに適切なラベルが付いているか確認します。
2. 入力形式が明確に指示されているかを確認します。
3. 必須フィールドであることが示されているかを確認します。

b. 自動テストツール

• AxeやWAVEなどのツールを使用して、ラベルの関連付けやARIA属性が適切かをチェックします。

まとめ

WCAG 2.2の「3.3.2 ラベルまたは指示」は、入力フィールドに明確で分かりやすいラベルや指示を提供することで、すべてのユーザーがフォームを正確に利用できるようにすることを目的としています。

実装ポイント

1. 明確なラベルを提供し、入力フィールドと関連付ける。
2. 入力形式や必須フィールドを明示する。
3. 関連するフィールドをグループ化して説明する。

これにより、ユーザーがエラーなくスムーズに入力を完了できるフォーム体験を提供できます。

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