チェック項目
label要素をつかってフォームコントロールとラベルを関連付ける
「フォームコントロールのラベル」とは
レベル1：必ず達成
テキスト入力欄やチェックボックス、select要素など、HTMLに定義されているユーザーの入力を受け付ける要素（フォームコントロール）は全て名前を持つ必要があります。名前は、スクリーンリーダー利用者がフォームコントロールにフォーカスを合わせたときに読み上げられます。
label要素を使うと、フォームコントロールに名前を付けられると同時にクリックやタップで選択できる範囲が広がるため、ユーザビリティ面にもメリットがあります。
具体例①：テキスト入力欄
<label>
お名前
<input type="text" name="full-name" />
</label>
ラベルとテキスト入力欄を一つのlabel要素に含める
ラベルと入力欄を
label要素で囲むと、入力欄の名前が「お名前」に設定されます。<label for="full-name">お名前</label>
<input id="full-name" type="text" name="full-name" />
テキスト入力欄にidを付与し、label要素のfor属性で参照する
テキスト入力欄に
idを付与し、label要素のfor属性で参照することで、入力欄の名前が「お名前」に設定されます。ラベルとコントロールを隣同士に置けない場合などに便利です。具体例②：チェックボックス
<label>
<input type="checkbox" name="receive-email" value="1" />
メールを受取る
</label>
チェックボックスとラベルを一つのlabel要素に含める
チェックボックスラベルを
label要素で囲むと、チェックボックスの名前が「メールを受取る」に設定されます。<input id="receive-email" type="checkbox" name="receive-email" value="1" />
<label for="receive-email">メールを受取る</label>
チェックボックスにidを付与し、label要素のfor属性で参照する
チェックボックスに
idを付与し、label要素のfor属性で参照することで、チェックボックスの名前が「メールを受取る」に設定されます。ラベルとコントロールを隣同士に置けない場合などに便利です。