Why labels matter
Every form control needs a label that names its purpose. A label tied to a field also enlarges the click target and gives screen readers the field name. A placeholder is not a label because it vanishes once the user types and often fails contrast.
- Associate the label so clicking it focuses the field.
- Keep the label visible rather than relying on a placeholder.
- Name the purpose plainly so the field is self explanatory.
Communicating errors
When validation fails, the user must learn what went wrong and where, without guessing.
- Place the error message near its field, not only in a distant summary.
- Connect the message to the field so screen readers read it with the control.
- Mark the field as invalid so assistive tech knows it needs attention.
Helpful patterns
- Describe how to fix the error, not just that it exists.
- Avoid color as the only signal, since some users cannot perceive it.
- Announce a freshly appearing error so it is not missed.
Connecting a description to a field also lets you attach hints like formatting rules, which screen readers read alongside the label.
Key idea
Give every field a visible associated label, then connect clear error messages to the field so users know what to enter and how to fix mistakes.