WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

F68: 達成基準 1.3.1 及び 達成基準 4.1.2 の不適合事例 - ラベルとユーザーインタフェース・コントロールとの関連付けがプログラムで解釈可能ではない

適用(対象)

視覚的に確認できるラベルを用いている HTML 及び XHTML のコントロール

これは次の達成基準に関する不適合事例である:

解説

この文書では、視覚的なデザインにおいてはラベルがあるにもかかわらず、フォームのコントロールに対応するラベルがlabel要素を用いて明示的に指定されていない場合に生じる不適合事例について解説する。

注記 1:明示的なラベル付けが必要な要素は以下の通りである:

注記 2:以下の要素については、ラベルをvalue属性(サブミット(送信)およびリセット・ボタン)、al属性(画像を用いたボタン)、あるいは要素の内容そのもの(ボタン)でそれぞれ指定するため、label要素を用いない

事例

不適合となる事例 1:

以下の例では、視覚的には分かる形でフォームのコントロールに対応するラベルが提示されているが、label要素を用いてラベルとコントロールの対応が示されていない。この例の場合、ユーザーエージェント(支援技術を含む)がどのラベルとどのコントロールが対応しているのかを判断できない可能性があるため不適合となる。

コード例:


<form>
 姓:
 <input type="text" name="lastname">
 <br />
 名: 
 <input type="text" name="firstname">
 <br />
 犬を飼っている <input type="checkbox" name="pet" value="dog" />
 猫を飼っている <input type="checkbox" name="pet" value="cat" />
</form>
		

不適合となる事例 2:

以下のコード例において、ユーザーエージェント(支援技術を含む)は入力コントロールに対応するラベルを適切に判断することができない。

コード例:


<form action="..." method="post">
<p>
<label>
   姓
   <input type="text" name="lastname">
</label>
<label>
   名
   <input type="text" name="firstname">
</label>
</p>
</form>
		

訳注:WCAGワーキンググループに確認中。この例は、HTML 4.01の仕様書によれば適切なラベルの使い方であり、少なくとも仕様上の問題はない。仮に支援技術がそれを適切に判断できないとすればそれは支援技術の問題であり、この例を不適合事例として挙げるのは不適切である。

コード例:


<form action="..." method="post"> 
<p> 
<label>姓</label> 
<input type="text" name="lastname"> 
<label>名 </label>
<input type="text" name="firstname"> 
</p> 
</form>
		

不適合となる事例 3:

以下の例では、検索用のテキストフィールドに名前がついていない。title属性を用いるか、CSSによって非表示にしたlabel要素を用いることで名前をつけることができる。

コード例:


<input type="text" value="検索文字列を入力"><input type="submit" type="submit" value="検索">
		

検証

チェックポイント

ウェブページ上にある、typeradio, checkbox, text, file 又は passwordのすべてのinput要素、すべてのtextareas要素、及びすべてのselect要素について:

  1. 視覚的デザインにおいて、フォーム・コントロールの目的が分かるようなテキストのラベルが用いられている

  2. label要素を用いて、テキストとフォーム・コントロールの要素が関連づけられている

判定基準

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。