a11y/form-errors

Why

An error shown only by a red border is invisible to screen reader users and to people who cannot tell the colour apart; an error far from its field, or one that says only "invalid", leaves everyone guessing.

Fix

On a failed submit: set aria-invalid="true" on each wrong field, render the message in text right after it with an id, point to it with aria-describedby, and say what to do ("Enter a date like 31/12/2026"). Move focus to the first wrong field, or to an error summary at the top that links to each field. Keep the values the person typed.

Examples

<!-- good -->
<label for="email">Email</label>
<input id="email" type="email" autocomplete="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address like name@example.com.</p>

Sources

• WCAG 2.2, Understanding SC 3.3.1 Error Identification
• WCAG 2.2, Understanding SC 3.3.3 Error Suggestion
• WAI Forms Tutorial, user notifications

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/form-errors