How should I write form error messages?

Everybody makes mistakes, and good form error messages can mean the difference between a new customer sign up and a missed opportunity.

With several key approaches in place, users can identify what went wrong and fix the problem more efficiently.

• Describe the error in text, including information about which item is causing the error. A common strategy is to include the input’s name in the error message.
  • Examples: “A first name is required” or “Please provide a valid email address”
• Include a suggestion on how to fix the error, if known. This is especially important if information must be in a specific format.
  • Example: “Provide a birth date in dd/mm/yyyy format” or "Provide a password that contains at least 8 characters."
• On the code side, programmatically relate the error message to the input it describes, such as using the aria-describedby technique.
• Ensure that an error message is announced automatically by assistive technology, such as by using an assertive alert. Learn more about how to code assertive alerts.
• On the design side, incorporate visual cues that don’t rely on color alone.
  • Example: A red X, where both the red color and the X symbol visually signal the presence of an error.

With these tools, your users are much more likely to know that an error has occurred and understand how to correct and submit that form.

For a step-by-step guide on evaluating the accessibility of your form error messages, and lots of other web content, explore the Guided Manual WCAG Audit Tool from Accessible Web.