テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

ラベルを用いている HTML 及び XHTML のフォームコントロール

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、フォームコントロールとラベルを明示的に関連付けるために、label 要素を利用することである。ラベルは、label 要素の for 属性によって特定のフォームコントロールと結びつけることができる。この場合、for 属性値はフォームコントロールの id 属性値と同じでなければならない。

id 属性が name 属性と同じ値で、両方とも指定しなければならない場合でも、その id はそのウェブページ内で一意的なものとして、重複して使用してはならない。

この達成方法は、label 要素が見えているかどうか、つまり CSS で非表示にしているかどうかに関わらず、達成基準 1.1.1、1.3.1、4.1.2 を満たすことができる。しかし、達成基準 3.3.2 の場合、label 要素は、フィールドの目的を理解するのに助けが必要であるすべての人に支援を提供するため、表示しなければならない。

ラベルまたはコントロールをクリックするとコントロールがアクティブなるため、コントロールのクリック可能な領域を大きくすることは、この達成方法の更なるメリットである。これは運動制御が不十分な利用者に役立つ。

input 要素の type="checkbox" と type="radio" では、label 要素をその後に配置することに注意する。

注記

明示的なラベルを利用する要素は次の通りである:

  • input type="text"
  • input type="checkbox"
  • input type="radio"
  • input type="file"
  • input type="password"
  • textarea
  • select

次の場合には、label 要素は利用しない。これらの要素に対するラベルは、value 属性 (送信ボタン及びリセットボタン)、alt 属性 (画像ボタン)、又は要素それ自体の内容 (汎用ボタン) を介して提供されるからである。

  • 送信及びリセットボタン ( input type="submit" 又は input type="reset")
  • 画像ボタン ( input type="image")
  • 隠しフィールド ( input type="hidden")
  • スクリプトボタン (button elements or <input type="button">)
訳注:

WAIC では H44 に関するアクセシビリティ サポーテッド（AS）情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H44 も参照されたい。

事例

事例 1: テキスト入力フィールド

この事例では、テキスト入力フィールドに「First name:」という明示的なラベルが付けてある。label 要素の for 属性値は、input 要素の id 属性値と一致している。 

<label for="firstname">First name:</label> 
<input type="text" name="firstname" id="firstname" />

事例 2: チェックボックス

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

事例 3: ラジオボタンのグループ

関連するラジオボタンの小さなグループについて、簡単な説明が付けてあり、さらに個々の要素にラベルが付けてある。

注記

ラジオボタンの数が多く、それらの関連付けや操作説明を必要とする場合は、H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する考慮すべきである。 

 <h1>Donut Selection</h1>

<p>Choose the type of donut(s) you would like then select 
   the "purchase donuts" button.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>
</form>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注:

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記は、HTML §4.10.4. The label element を代わりに参照できる。

検証

手順

ウェブページ内の type="text"、type="file"、又は type="password" を指定した input 要素、textarea 要素、及び select 要素全てについて:

  1. input 要素、textarea 要素又は select 要素の前に、そのコントロールの目的を特定できる label 要素があることを確認する。
  2. label 要素の for 属性が、input 要素、textarea 要素又は select 要素の id と一致している。
  3. label 要素のラベルが表示されていることを確認する。

ウェブページ内の type="checkbox" 及び type="radio" を指定した input 要素全てについて:

  1. input 要素の後に、そのコントロールの目的を特定する label 要素があることを確認する。
  2. label 要素の for 属性が、inputM/code> 要素の id 属性と一致していることを確認する。
  3. label 要素のラベルが表示されていることを確認する。

期待される結果

  • 1. 及び 2. の結果が真である。達成基準 3.3.2 に関しては、3. の結果も真である。