Provide clear error messages on forms

Applicable Role(s): Developer

Overview

It is confusing for a user if the form isn't validated correctly, but there's no clear indication why. Clear error messages describing how to fix the issue will allow users to fix issues faster and be able to submit the form.

Best Practices and Tips

Don't rely on color alone to convey an issue.

Users that are blind, have low vision or a color vision deficiency may not be able to detect a visual cue like a red border.

Add semantics to convey invalid fields.

If a user tries to submit an invalid form, include aria-invalid="true" on the inputs that have invalid values.

Examples/Patterns

Inaccessible messaging

password input with red border around it showing error, screenshot.

Just a red border relies on the user being able to understand the problem not just visually, but to also perceive the color red accurately. This is not true for all users, so not all users will understand what the problem is.

Somewhat accessible messaging

Invalid credentials alert above username and password inputs, screenshot.

The message "Invalid Credentials" tells the user there is a problem with the form, so that is a starting point. It could be clearer whether the problem is with the username input, the password input, or both.

Most accessible messaging

Invalid password alert above username and password inputs, screenshot.

A user can tell from the "Invalid password" message that their username input was fine, but they need to re-type their password accurately. This tells the user clearly what the problem is, and implies what they need to do to submit the form correctly.