label 要素又は legend 要素を使用して、必須のフォームコントロールを明示する

適用（対象）

外部ラベルを用いている HTML 及び XHTML のコントロール

これは、次の達成基準に関連する達成方法である: 達成基準 3.3.2: ラベル又は説明を理解する (G131: 説明的なラベルを提供すると使用したとき十分)

解説

この達成方法の目的は、ウェブアプリケーション又はフォームにおける特定のフォームコントロールが、データ送信の成功のために必須であることを明確に示すことである。コントロールが必須であることを示す記号又はテキストは、label 要素、又は fieldset 要素でグループ化されたコントロールに対する legend 要素を用いて、プログラムが解釈できるようにそのコントロールと関連付ける必要がある。記号が用いられている場合には、事前に利用者にその意味を説明する必要がある。

事例

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

CSS:
.req {font-size: 150%}

HTML:

<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />

<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
<input type="text" name="firstname" id="firstname" />
...

<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>

参考リソース

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

• HTML 4.01 form labels

関連する達成方法

• H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する
• H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する
• H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する

検証