CodePark/ questions / Forms & errors
START PRACTICINGPRACTICE
Frontend question · Accessibility › Forms & errors

How do you make form validation errors accessible?

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

Every user must know that there is an error, where it is, and how to fix it.

What to do for each field:

  • Write the error as text next to the field. A red border alone is not enough, because colour-blind and screen reader users miss it.
  • Say how to fix it: "Enter an email like name@example.com", not "Invalid input".
  • Link the message to the input with aria-describedby. The screen reader then reads it when the field gets focus.
  • Set aria-invalid="true" on the field while it is wrong, so it is announced as invalid.
  • Mark required fields in the label text, not only with a *. Use required or aria-required="true" too.

What to do on submit:

  • Move focus to the first invalid field. Or move focus to an error summary at the top that lists each error as a link to its field.
  • Keep what the user typed. Never clear the form.
  • Don't show errors on every keystroke while someone is still typing. Showing them when the field loses focus, or on submit, is calmer.

WCAG asks for this in 3.3.1 Error Identification and 3.3.3 Error Suggestion.

  • Errors are shown as text, not only with colour.
  • The message explains how to fix the problem.
  • aria-describedby links the message to the field, and aria-invalid="true" marks the field as wrong.
  • On submit, focus moves to the first invalid field or to an error summary.
  • The form keeps what the user typed.