HTML labelタグ：forとidの関連付けとクリック範囲
HTML <label>は、フォームコントロールの名前を表示テキストおよび支援技術と関連付けます。ラベルのforをコントロールのidに接続するか、ラベルの内部にコントロールを配置します。関連付けられたテキストをクリックすると、入力にフォーカスを合わせたり、チェックボックスを切り替えたりできます。
forとidでコントロールを明示的に接続する
for 属性は、対象コントロールの name ではなく、同じドキュメント内の id を取ります。id はドキュメント内で一意でなければならず、name は送信データのフィールドを識別します。レイアウトが label と input を分けていても、for と id が一致していれば、その命名関係は維持できます。
次のドキュメントを labels.html として保存し、ブラウザで開きます。テキスト入力には for を使用し、チェックボックスにはラベルでラップしています。これはインターフェース演習であり、データをサーバーに送信するわけではありません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>labelの関連付けの比較</title>
</head>
<body>
<h1>フォームコントロールの名前</h1>
<p>
<label for="reader-name">表示名</label>
<input id="reader-name" name="reader" type="text"
aria-describedby="name-help" placeholder="例：そら">
</p>
<p id="name-help">画面に表示するニックネームを入力してください。</p>
<p>
<label>
<input type="checkbox" name="tips" value="yes">
学習情報を受け取る
</label>
</p>
</body>
</html>表示名をクリックして、入力にカーソルを置きます。文字を入力すると、プレースホルダーは消えますが、ラベルは表示されたままです。- チェックボックスを選択するには、
学習情報を受け取るというテキストをクリックし、もう一度クリックして解除します。小さなチェックボックスを正確に押す必要はありません。 - コントロール間の移動にはTabを使用し、チェックボックスの切り替えにはSpaceを使用します。キーボード操作も確認してください。
コントロールを囲むラベルと補足説明の違い
label内にinputを配置すると、forなしで暗黙の関連付けが作成されます。1つのラベルには関連付けるコントロールだけを含め、別のラベルをその中にネストしないでください。また、ラベルでラッピングしてidおよびforを使用することも可能ですが、forは含まれるコントロールを参照する必要があります。支援技術や外部ツールとの互換性のために、明示的なfor/idの関連付けを検討する価値があります。
ラベルは、読者に何を入力すべきかを伝える名前です。補足の指示やエラーメッセージは別の段落に置き、aria-describedbyと関連付けてください。例では、画面に表示するニックネームを入力してください。が名前を補足しており、プレースホルダーはラベルの代わりとして使用されません。
関連付けやクリックが機能しない場合
for のタイプミスや大文字・小文字の違い、id の重複値、およびターゲット要素の型を確認してください。for をラベル付けできない要素（hidden 入力など）に指定しても、通常の入力のようには機能しません。ラベルは select や textarea でも機能します。関連する選択肢のグループには、fieldset と legend で名前を付けてください。
ラベル内に個別のリンクやボタンを配置すると、クリックしたときにナビゲートするのかコントロールを選択するのかが不明瞭になる可能性があります。追加のリンクはラベルの外に配置し、文脈を最初に説明してください。見出し要素を挿入してラベルを大きくするのではなく、CSS でラベルをスタイル設定してください。MDNのlabel要素リファレンス では、サポートされているコントロールと作成要件について説明しています。
