HTML

The <label> element in HTML is used to associate a name or description with a form control, thereby accurately conveying the purpose of that input field to both users and assistive technologies.

label 要素

<label>とは？

<label>要素は、フォーム内の入力要素（例えば<input>、<textarea>、<select>など）に対して「ラベル（名前・説明文）」をつけるために使用するHTMLの要素です。主な目的は以下の通りです。

可読性の向上
ラベルを明示的に指定することで、ユーザーにフォームの入力欄が何を意味しているかがわかりやすくなります。
アクセシビリティの向上
スクリーンリーダーなど支援技術がラベルを参照し、ユーザーに対して適切に入力欄の意味を伝えることができます。視覚に頼れないユーザーでもフォームを操作しやすくなります。
クリック範囲の拡張
<label>要素を上手に使うことで、テキスト部分をクリックするだけで入力要素をアクティブにできるようになります（特にチェックボックスやラジオボタンで便利）。

基本的な使い方

インライン要素としてのラベル

<label>要素はインライン要素（行内要素）として扱われます。テキストと同じ行に配置され、通常はフォームコントロールを説明するための短い文や語句になります。

HTML

<label>ユーザー名：</label>
<input type="text" name="username">

上記の例では、<label>要素自体はフォームコントロールと直接紐付けられていません。あくまでラベルとしてテキストを表示しているだけですが、アクセシビリティやクリック連動を考慮するなら、後述する for 属性や入れ子の手法で関連付けが必要です。

for属性による関連付け

<label>要素のfor属性に、対象となるフォーム要素のid値を指定すると、両者が関連付けられます。これにより、画面上でラベルをクリックすると、対応するフォーム要素がフォーカスされる仕組みが働きます。

HTML

<label for="user-id">ユーザーID：</label>
<input type="text" id="user-id" name="user-id">
label for="user-id"
for属性は、ひとつの一意なIDを指定する必要があります。
input id="user-id"
ラベルと紐付けるためには必ずidを指定します。

この方法は、フォーム要素とラベルが離れた場所にある場合や、レイアウト上どうしても入れ子にできない場合に便利です。

要素を入れ子にして関連付ける方法

<label>要素はフォーム要素を内包する（入れ子にする）ことでも、同様に関連付けることが可能です。この場合はfor属性を使わなくても、含まれているフォーム要素が自動的に紐付きます。

HTML

<label>
	パスワード：
	<input type="password" name="password">
</label>

<label>要素のアクセシビリティ上の重要性

スクリーンリーダーとラベル

スクリーンリーダーは、フォーム要素に紐付いたラベルを読み上げることで「どんな情報を入力する欄か」をユーザーに伝えます。<label>要素が無い状態だと、スクリーンリーダーは入力欄のコンテキストを正確に伝えられません。

プレースホルダとの違い

HTML5以降、placeholder属性を使って入力欄に初期表示の薄い文字を入れることが可能になりました。しかし、placeholderはユーザーが入力を開始すると消えてしまいますし、スクリーンリーダーによっては読み上げ方が変わるなど、必ずしもラベルの代替にはなりません。

必ずフォームには適切な<label>をつけることが推奨されます。ビジュアルデザイン的にラベルを省略したいときも、アクセシビリティ上は画面外に隠すなど工夫が必要です。

WCAGの観点

Webアクセシビリティガイドライン（WCAG）では、入力フォームには必ずラベルまたは代替テキスト（ARIA属性等）を提供するよう推奨されています。適切に<label>を使うことで、キーボード操作やスクリーンリーダー利用者など、さまざまなユーザーがフォームを利用しやすくなります。

フォーム要素と<label>の関係

<input>（テキスト、パスワード、チェックボックス、ラジオボタンなど）

<input>要素のうち、ユーザーが入力を必要とするテキスト系（type="text", type="password"など）には、基本的に1つの<label>が紐付きます。また、チェックボックスやラジオボタンの場合でも同様に<label>を関連付けると、ラベル部分をクリックして状態を変更できるので操作性が上がります。

HTML

<!-- チェックボックスの例 -->
<label for="agree">利用規約に同意する</label>
<input type="checkbox" id="agree" name="agree">

チェックボックスやラジオボタンの場合は、上のように<label>をクリックするだけでチェック切り替えができるようになります。

<select>要素と<label>

<select>要素にもラベルが必要です。select自体にはidを割り当て、<label>で紐付けるのが一般的です。

HTML

<label for="country">国を選択してください：</label>
<select id="country" name="country">
	<option value="jp">日本</option>
	<option value="us">アメリカ</option>
	<option value="fr">フランス</option>
</select>

<textarea>要素と<label>

テキストの大きな入力欄の場合もラベルを付けておくと、スクリーンリーダーなどでテキストエリアが何のための入力なのかが明確になります。

HTML

<label for="message">メッセージを入力してください：</label><br>
<textarea id="message" name="message" rows="5" cols="30"></textarea>

高度な活用例と注意点

<label>要素を使ったクリック領域の拡張

チェックボックスやラジオボタンは、実際のフォームコントロール部分だけをクリックすると選択できますが、小さい場合やタッチデバイスでは操作しづらいこともあります。<label>をテキスト全体にかぶせておくと、クリック（タップ）できる範囲が広がり、ユーザーエクスペリエンスが向上します。

HTML

<!-- 入れ子構造でクリック領域を拡張 -->
<label>
	<input type="checkbox" name="subscribe">
	お知らせメールを受け取る
</label>

カスタムUI（例えばカスタムチェックボックス）での利用方法

最近では、見た目をカスタマイズしたチェックボックスやラジオボタンを作る例が増えています。CSSでdisplay: none;もしくはvisibility: hidden;を使って本来のフォームコントロールを隠し、代わりに擬似要素やSVGアイコンなどで表示するケースもあります。

このときも<label>要素自体は非常に重要です。チェック状態を変える対象の<input>は画面に見えなくても、アクセシビリティ上は有効であり、for属性または入れ子で関連付けておけばキーボード操作やスクリーンリーダー利用者にも対応できます。

HTML

<input type="checkbox" id="customCheck" class="custom-checkbox">
<label for="customCheck" class="custom-label">カスタムチェックボックス</label>

CSS

.custom-checkbox {
	display: none;
}
.custom-label {
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	/* 他にも見た目のカスタマイズいろいろ */
}
.custom-label::before {
	content: "";
	display: inline-block;
	width: 20px; 
	height: 20px;
	border: 1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
}
.custom-checkbox:checked + .custom-label::before {
	background-color: #007bff; /* チェック時の色変化 */
}

<label>のスタイリング

<label>はインライン要素ですが、CSSでdisplay: block;やdisplay: inline-block;などに変更してレイアウトを整えることができます。ただし、ブロック要素にするとラベルとフォーム要素が複数行にわたって並んだり、クリック領域がどの部分までか変更されたりするため、意図したレイアウトになるように注意してください。

動的フォームへの対応

JavaScriptなどで動的にフォーム要素を追加・削除する場合は、IDの重複に気を付けつつ、生成した<input>と<label>をきちんと紐付ける必要があります。また、ラベルテキストも動的に変更する場合は、画面リーダーへの読み上げも随時更新されるように実装しましょう。

よくある誤用例・注意点

for属性とidが対応していない
たとえばfor="username"としているのに、対応する<input>にid="user-name"（アンダースコアやハイフン含む、あるいはスペルが違うなど）を使っていたりして、正しく紐付かないケースです。誤字・脱字に注意しましょう。
for属性や入れ子を使わずテキストとして置いてしまう
視覚的にはラベルっぽい文字列があっても、実際にはスクリーンリーダーにとっては単なるテキストとして扱われるため、適切に動作しません。
フォームコントロールに複数のラベルが紐付いている
ユーザーに混乱をもたらす可能性があります。特にスクリーンリーダー利用者は複数ラベルの読み上げで混乱しますので、一つのフォームコントロールに対して明確に一つのラベルをつけるようにしましょう（補足説明などは別のアプローチで提供）。
プレースホルダをラベルの代わりとして使ってしまう
先述の通り、プレースホルダは入力を始めると消えてしまうので、特にアクセシビリティ面で十分ではありません。

まとめ

ラベルの役割は「入力欄の意味を明示する」こと
ユーザーが何を入力すれば良いか分かりやすくなるだけでなく、スクリーンリーダーにも対応することでアクセシビリティが向上します。
<label>要素には2種類の関連付け方法がある
プレースホルダはラベルの代替ではない
プレースホルダをヒントとして使うのは良いが、ラベルが省略できるわけではありません。
実践的なテクニックも多数存在
クリック領域の拡張やカスタムUIでの利用など、<label>要素はデザインやUXの向上にも欠かせない存在です。
誤用に注意してアクセシビリティを高めよう
for属性の記述漏れやIDの重複、プレースホルダの誤用などはよくあるミスです。必ず確認してから公開しましょう。