Accessibility Certified – Home
Free check Menu

Error messages that help instead of confuse

A red border is not enough. A good error message is text next to the field, linked to it, explains how to fix it and is found as soon as the form is submitted.

3.3.13.3.33.3.21.4.14.1.21.3.1

Live demo

This demo is checked with axe-core without violations and fully operable by keyboard.

Try it with the keyboard: Tab, Enter, Space, the arrow keys and Escape. With a screen reader on, you hear what gets announced.

Request a call back (demo, sends nothing)

For example [email protected]

The live demo needs JavaScript. Code and requirements are below.

Keyboard interaction

Tab
Moves through the fields to the submit button.
Enter
Submits the form; with errors, focus moves to the error summary.
Enter
On a link in the error summary: jumps straight into the field with the error.

When to use this pattern

Every form needs this pattern. Validate on submit and show all errors at once: a summary at the top with links to the fields, and the exact message at each field. Messages that appear while someone is still typing often disturb screen reader users; if you validate early, do it when the field loses focus.

More on labels, required fields and autocomplete is in our guide to accessible forms.

Roles, states and properties

  • Every field has a visible <label>; format hints are shown before submitting and linked with aria-describedby.
  • On error: aria-invalid="true" on the field and the error message added to aria-describedby.
  • The message describes the error and the fix in text, not by colour or an icon alone.
  • After submitting, an error summary (a heading with tabindex="-1") receives focus and lists each error as a link to its field.
  • Input is kept; nobody has to fill in the form again.

Keyboard interaction

KeyEffect
TabMoves through the fields to the submit button.
EnterSubmits the form; with errors, focus moves to the error summary.
EnterOn a link in the error summary: jumps straight into the field with the error.

Code

HTML and JavaScript (shortened)
<label for="mail">Email address</label>
<p id="mail-hint">For example [email protected]</p>
<input id="mail" type="email" autocomplete="email"
  aria-describedby="mail-hint mail-err"
  aria-invalid="true">
<p id="mail-err" class="err">
  Error: enter an email address with an @,
  for example [email protected].
</p>

<!-- top of the form, receives focus after submit -->
<div class="err-summary">
  <h2 tabindex="-1">There are 2 errors</h2>
  <ul><li><a href="#mail">Email address is missing an @</a></li></ul>
</div>

Common mistakes

  • Errors marked with a red border only (fails 1.4.1 Use of Color and 3.3.1 Error Identification).
  • “Invalid input” with no hint about what is expected (3.3.3).
  • The message appears somewhere on the page but is not linked to the field.
  • The submit button stays disabled until everything is right, so nobody learns what is missing.
  • The form is empty after submitting.

Related WCAG criteria

Sources

Are your components built like this?

The free check finds many issues automatically. In the audit a person tests every component with a keyboard and a screen reader.

Free checkSee our method