Form Labels
Every form input must have an associated label. Use for/id pairing, wrapping labels, or aria-label for icon-only inputs.
HTML
Beginner
3 min read
Accessible Form Labels
Example
<!-- Explicit label association -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<!-- Implicit (wrapping) -->
<label>
Password
<input type="password" name="password">
</label>
<!-- aria-label for icon buttons -->
<button aria-label="Close dialog">
<svg aria-hidden="true">...</svg>
</button>
<!-- aria-describedby for hints -->
<input type="password" id="pw" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 8 characters.</p> Pro Tip
Placeholder text is not a substitute for a label — it disappears when the user types.