Labels, Validation & Error Messaging
Every form control needs an accessible name. A visible <label> associated with an input is usually the best default.
Validation should explain what the user needs to fix. Connect error messages to fields with appropriate semantics and avoid relying on color alone.
Client-side validation improves feedback but does not replace server-side validation. Treat all client input as untrusted at the API boundary.
Accessible field error
<label htmlFor="email">Email</label>
<input
id="email"
name="email"
aria-invalid={Boolean(error)}
aria-describedby={error ? "email-error" : undefined}
/>
{error && <p id="email-error">{error}</p>}💡 The input and its error message are programmatically associated so assistive technologies can understand the relationship.
Key Takeaways
- Every control needs an accessible name.
- Errors should identify the field and explain how to fix it.
- Server validation remains mandatory.