The Feedback Loop
When a form submission fails, three things must happen:
- Notification: The user is alerted that an error occurred.
- Identification: The specific field in error is marked programmatically.
- Suggestion: The error message text is associated with the field.
Implementation
<label for="email">Email</label>
<input
type="email"
id="email"
aria-invalid="true"
aria-describedby="email-error"
/>
<span id="email-error" class="error-text">
Please enter a valid email address (e.g., user@domain.com).
</span>
Focus Management
On submit, if there are errors, move focus to the first invalid field or an error summary at the top of the form so keyboard users don't have to tab through the whole page to find the issue.