Clearly identify input errors
Everyone makes mistakes, even you and I. Make it easy for users to understand and correct their mistakes with a bit of guidance. Provide timely and clear error identification guidance when users make mistakes on your website. Using error identification keeps your website running smoothly and keeps your users from getting frustrated.
One of the worst areas for mistakes websites are forms, including checkouts, newsletter sign-ups and questionnaires. Any of your users can make a simple error that means they can’t submit your form. If users cannot identify their mistakes, they will leave.
What to do
- Identify and explain to the user any mistakes that you can detect automatically.
- Add error explanation close to the error, showing what is wrong and how to fix it.
- If a form requires input in a certain format, show and describe the required format.
- If a mandatory field is empty, highlight the field and explain what’s required.
- Build forms to be forgiving, accepting variations on the formats you prefer.
- Don’t ask for too much information, just what you need.
- Be specific. Use clear, concise instruction and form field labels.
- Highlight mistakes in forms with colours and symbols.
- Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
- Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.
- Guideline 1.3.3 – Sensory Characteristics
- Guideline 1.4.1 – Use of Colour
- Guideline 3.3.2 – Labels or Instructions
- Guideline 3.3.3 – Error Suggestion
- Guideline 3.3.4 – Error Prevention (Legal, Financial, Data)
- Understanding Success Criterion 3.3.1 (W3C)
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.