フォーム・コントロールに関連したラベルには LABEL 要素を使用する
実装方法
・フォーム・コントロールに関連したラベルに LABEL 要素を定義する
・その中で FOR 属性を使用してコントロール情報を付加する
例
<FORM action="action.cgi" method="get">
<LABEL for="name">名前：</LABEL>
<INPUT type="text" id="name" SIZE="50"><BR>
<FIELDSET>
<LEGEND>性別</LEGEND>
<INPUT TYPE="radio" name="sex" id="male">
<LABEL FOR="male">男性</LABEL>
<INPUT TYPE="radio" name="sex" id="female">
<LABEL FOR="female">女性</LABEL>
</FIELDSET> <BR>
<INPUT TYPE="submit"> <INPUT TYPE="reset">
</FORM>
LABEL 要素
LABEL 要素を使用してフォーム・コントロールとそのラベルを明示的に関連付ける必要があります。
各 FORM コントロールのラベルに対して LABEL 要素を配置し、その中に FOR 属性を使用して、特定のフォーム・コントロールと関連付けます。その際に FOR 属性の値は、フォーム・コントロールの ID 属性の値と同じである必要があります。
また、「リセット」ボタンや、「送信」ボタン、およびイメージ・ボタンには、暗黙的に関連付けられたラベルがあるため、ラベルを関連付ける必要はありません。イメージ・ボタンの場合は VALUE 属性または ALT テキストにて関連付けを行います。
上記の定義を行うことで、ブラウザは、特定のコントロールにどのラベルが関連付けられているかをユーザーに明示的に示すことができ、ラベルをクリックすると、カーソルがフォーム・フィールドに移動するか、ラジオ・ボタンまたはチェック・ボックスの値が切り替わります。これは多くのユーザーにとって理解しやすく、マウスで実行できる操作の範囲が広がります。
重要度
★★（強く推奨）
ガイドライン
JIS X 8341-3:2010 7.1.1.1 A
WCAG 2.0 checkpoint 1.1.1 A
WCAG 1.0 checkpoint 12.4
以上
