Labels
🏠The everyday picture
A paper form with empty boxes and no words beside them. You'd have to guess what each box is for. A screen reader with an unlabelled field is in exactly that position.
📘What it really is
- Every field needs a visible
<label>, connected to it:
<label for="email">Your email</label>
<input type="email" id="email" name="email">
The label's for matches the field's id.
- What a connected label gives you:
- screen readers read it out when the field is selected;
- clicking the label selects the field (a bigger target, helpful on phones);
-
it stays visible while typing, unlike a placeholder.
-
Group related fields, like a set of radio buttons, with
<fieldset>and give the group a title with<legend>:
<fieldset>
<legend>Preferred time</legend>
<input type="radio" id="morning" name="time" value="morning">
<label for="morning">Morning</label>
<input type="radio" id="evening" name="time" value="evening">
<label for="evening">Evening</label>
</fieldset>
- Keep labels short and plain: "Phone number", not "Please enter your mobile contact".
🖱️Try it
Give every field in your contact form a connected label. Add a <fieldset> of radio buttons for preferred
contact method (email or phone). Click each label and check the right field is selected.
✅Quick check
An AI builds a form with placeholders but no labels. It looks clean. What's the problem?
Show the answer
Screen readers may not announce what each field is, and the hint disappears once someone starts typing. Ask for visible, connected labels.
How does the browser know which label belongs to which field?
Show the answer
The label's for matches the field's id.