A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
メソッド 1: for + id (明示的)
html
Email address
ラベルの for は input の id と一致します。マークアップで隣接していなくても機能します。
<label>
Email address
<input type="email" />
</label>
input はラベル内にネストされます — id は不要です。
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
placeholder はユーザーが入力すると消え、確実に読み上げられません — ラベルとしてのみ使用しないでください。
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
aria-label (または aria-labelledby) は、表示ラベルが本当に不可能な場合にのみ使用してください。
正しく関連付けられたラベルは、フォームのアクセシビリティの実践の中で最も影響力のあるもの — すべてのコントロールに支援技術の名前を付け、誰もがクリックターゲットを拡大できます。
実際の <label> を優先します。aria-label には必要な場合のみ使用し、placeholder をラベルとして依存しないでください。