フォームには必ずラベルを

入力欄だけがぽつんとあって、何を入れるのか分からない——フォームのつまずきの多くは、ラベルの不足です。<label>は読み上げソフトに「この欄は何か」を伝え、さらにクリックできる範囲を広げる、全員が得するタグです。

体験してみよう：ラベルはタップ範囲を広げる

チェックボックスで効果がいちばん体感できます。文字のほうをクリックしてみてください。

書き方は2とおり

囲むのがいちばん簡単です。

<label>なまえ
  <input type="text" name="name" />
</label>

デザインの都合で離して置きたいときは、forとidでひもづけます。

<label for="name">なまえ</label>
<input type="text" id="name" name="name" />

forの値とidの値をそろえるのがポイント。どちらの書き方でも効果は同じです。

質問ごとのグループにも「名札」を

ラジオボタンやチェックボックスは、選択肢1つずつに<label>を付けても、「何の質問への選択肢なのか」が伝わらないことがあります。質問のまとまりは<fieldset>で囲み、質問文を<legend>に書きます。

<fieldset>
  <legend>すきなおやつは？</legend>
  <label><input type="radio" name="snack" />ひまわりの種</label>
  <label><input type="radio" name="snack" />まつぼっくり</label>
</fieldset>

読み上げソフトは「すきなおやつは？、ひまわりの種、ラジオボタン」のように、質問と選択肢をセットで読んでくれます。選択肢だけ聞こえて質問が分からない——という迷子を防げます。

placeholderはラベルの代わりにならない

うすい文字のヒント（placeholder）だけで済ませたフォーム、よく見かけます。

<input type="text" placeholder="なまえ" />  <!-- ❌ ラベルの代わりにはならない -->

これがダメな理由は3つあります。

• 入力を始めると消える——「あれ、何を入れる欄だっけ？」が起きる
• 色が薄い——前々回のコントラストの合格ラインをまず満たしていない
• 読み上げソフトによっては読まれないことがある

placeholderは「例：しまちゃん」のような入力例にとどめ、名札はかならず<label>で。

<label for="name">なまえ</label>
<input type="text" id="name" name="name" placeholder="例：しまちゃん" />  <!-- ○ 役割分担 -->

名札は<label>で常に見えていて、入力例はplaceholderで——この役割分担なら、入力を始めてヒントが消えても困りません。

必須の欄は「文字」で伝える

「必須の欄は赤くしておいたから分かるよね」——これはコントラストの回で学んだ色だけで伝えないの違反です。必須であることは文字で書きます。

<label for="email">メールアドレス（必須）</label>
<input type="email" id="email" name="email" required />

ラベルに「（必須）」と書けば、目で見る人にも読み上げの人にも同じ情報が届きます。required属性を付けると、空のまま送信しようとしたときにブラウザが自動で教えてくれるようになるので、あわせて付けておきましょう。

このレッスンのまとめ

1. すべての入力欄に<label>——読み上げに伝わり、押せる範囲も広がる
2. 書き方は「囲む」か「forとidでつなぐ」の2とおり
3. placeholderは入力例。ラベルの代わりにしない