When any input error is automatically detected, alert the user, describe the error, and provide instructions on how to correct it.
What to do:
- Clearly and specifically identify any errors that you can detect automatically
- Provide precise instructions on how to fix that error, potentially including an example where applicable (e.g. correct date format)
- Make it easy to find where the error is by adding a visual indicator
Resources:
- Amazing video that explains input error best practices (YouTube – 22 min 10 secs) — Developers, watch this video
- Example and explanation of code for error identification
Plain English Explanation:
When a user is filling out a form on your website, for any errors they make that are automatically detected, make it easy for them to correct the error. You can do this by:
- Clearly identifying what and where the error is
- Providing clear, precise instructions on how to fix the error
Examples:
When someone enters in an incorrect email format (e.g. tom@gmailcom)
When someone enters a date not in the required format (e.g. entering 20 instead of 2020)
When someone fails to enter a value in a required field (e.g. no state on an address is not selected)
—
Fixing forms to meet this success criterion is definitely not a beginner’s task. However, it’s fairly easy to understand what 3.3.1 is asking for and check to make sure your website’s forms meet the requirements.
Many websites currently fail this success criterion and it’s an extremely important one.
I highly, highly recommend watching the video in the resources section as 1) it thoroughly explains 3.3.1 and provides numerous examples and 2) it makes some improvements on even WCAG’s recommendations.
