How to label form fields
Unlabelled fields leave screen reader users guessing what to type.
Why it matters
If a screen reader announces only "edit text", the visitor cannot tell a name field from a phone field. Labels also make fields easier to tap on mobile.
Steps
- Give each input a visible label element.
- Connect them: the label's for attribute matches the input's id.
- Never use placeholder text as the only label.
For your developer
<label for="email">Email</label><input id="email" type="email">
Check it worked
Click on each label text. The cursor should jump into its field. That means they are connected.
Not sure if this affects your site?
Run a free scan to see exactly which of these your website needs.