How should I write form error messages?
Question
How should I write form error messages?
Answer
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.
Free Tools to Continue Learning
Newest Questions
Does color contrast need to pass AA and AAA in the contrast tool?
- aa
- aaa
- color contrast
After closing exposed content, should focus return to the UI component that exposed it?
- focus order
- modals
- returning focus
Do small navigation bars need skip links?
- keyboard navigation
- skip links
What if color is the only way to differentiate links from normal text?
- links
- ui component
- Use of color
What if a select box changes the rest of my form?
- change of context
- forms
- select box