視覚的に確認できるラベルを用いている HTML 及び XHTML のコントロール
これは次の達成基準に関する不適合事例である:
この文書では、視覚的なデザインにおいてはラベルがあるにもかかわらず、フォームのコントロールに対応するラベルがlabel要素を用いて明示的に指定されていない場合に生じる不適合事例について解説する。
注記 1:明示的なラベル付けが必要な要素は以下の通りである:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
注記 2:以下の要素については、ラベルをvalue属性(サブミット(送信)およびリセット・ボタン)、al属性(画像を用いたボタン)、あるいは要素の内容そのもの(ボタン)でそれぞれ指定するため、label要素を用いない。
サブミット(送信)及びリセット・ボタン (input type="submit"又は input type="reset")
画像を用いたボタン (input type="image")
隠し入力フィールド (input type="hidden")
スクリプト・ボタン (button 要素又は<input type="button">)
以下の例では、視覚的には分かる形でフォームのコントロールに対応するラベルが提示されているが、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>
以下のコード例において、ユーザーエージェント(支援技術を含む)は入力コントロールに対応するラベルを適切に判断することができない。
コード例:
<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>
以下の例では、検索用のテキストフィールドに名前がついていない。title属性を用いるか、CSSによって非表示にしたlabel要素を用いることで名前をつけることができる。
コード例:
<input type="text" value="検索文字列を入力"><input type="submit" type="submit" value="検索">
ウェブページ上にある、typeがradio, checkbox, text, file 又は passwordのすべてのinput要素、すべてのtextareas要素、及びすべてのselect要素について:
視覚的デザインにおいて、フォーム・コントロールの目的が分かるようなテキストのラベルが用いられている
label要素を用いて、テキストとフォーム・コントロールの要素が関連づけられている
1.が該当して、2.が満たされていない場合、この不適合条件が適用され、達成基準に不適合となる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。