WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

ユーザエージェント及び支援技術によるサポート

H44 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、フォーム・コントロールとラベルを明示的に関連付けるために、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 要素をその後に配置することに注意する。

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

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

事例

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

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

コード例:

<label for="firstname">お名前:</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>ドーナツ</h1>

<p>お好きなドーナツを選び、「ドーナツを購入」ボタンを押してください。</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">チョコレート</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">クリーム入り</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">ハニーがけ</label><br/>
  <input type="submit" value="ドーナツを購入"/>
</p>
</form> 

参考リソース

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

検証

チェックポイント

ウェブページ内の 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 属性が、input 要素の id 属性と一致している。

  3. label 要素のラベルが視覚的に認識できる状態である。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。