WebsightWhat it asks for, in plain English
If a form can tell what went wrong and knows a likely fix, the error message should offer it. "Invalid date" is a complaint; "Enter the date as day, month, year, for example 14 6 2025" is a suggestion. A postcode that is nearly right can be matched to the closest valid one; a username that is taken can be followed by alternatives.
It applies when the system knows, or can reasonably guess, what the person meant. There is one exception: when the hint would undermine security, such as telling someone which half of a sign-in attempt was wrong. A general message is acceptable there.
The message still has to be in text and linked to the field, as 3.3.1 asks. This criterion adds the quality of the message.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 3.3.3 page has the full intent, techniques and definitions.
Who it affects
A person with dyslexia or dyscalculia is told their phone number is invalid but not that it has a space it should not, so they keep retyping the same thing.
Someone with a cognitive disability needs to be told what a valid value looks like, not just that theirs is not one.
A person on a slow connection or short of time cannot afford a round of guessing; a clear suggestion means one more submit, not five.
Example
The person typed a real date. The message gives them nothing to go on.
The message says what is expected and gives an example. One more try and they are through.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:14px}label{display:block;font-weight:600;margin-bottom:4px}.msg{margin:0 0 6px;color:#b91c1c}input{font:inherit;padding:6px 8px;border:2px solid #dc2626;border-radius:4px;width:200px}</style>
<form>
<label for="dob">Date of birth</label>
<p class="msg" id="dob-err">Invalid input.</p>
<input id="dob" aria-invalid="true" aria-describedby="dob-err" value="1985/03/31">
</form><style>body{margin:0;padding:16px;font-family:system-ui;font-size:14px}label{display:block;font-weight:600;margin-bottom:4px}.msg{margin:0 0 6px;color:#b91c1c}input{font:inherit;padding:6px 8px;border:2px solid #dc2626;border-radius:4px;width:200px}</style>
<form>
<label for="dob">Date of birth</label>
<p class="msg" id="dob-err">Enter your date of birth as day, month, year, for example 31 3 1985</p>
<input id="dob" aria-invalid="true" aria-describedby="dob-err" value="1985/03/31">
</form>How to check it
- Fill in a form with wrong values: a letter in a number field, a date in the wrong order, a password that misses one rule.
- Read each error message. It should say what a correct value looks like or give an example, not just that the value is wrong.
- Check the message does not leak anything it should not, such as whether an email address has an account.
- Follow the suggestion. It should actually get you past the error.
What Websight checks for 3.3.3
Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.
Only a person can judge whether an error message helps. A scanner cannot submit the form or weigh the wording. Websight lists it in its manual checklist.
Practical tips
- Write every error as an instruction: start with a verb and include an example.
- If you can fix it for them (strip spaces from a card number, accept both date orders), do that and skip the error.
- Keep the same tone and position for every error on the site.
Other criteria in guideline 3.3, Input Assistance
- 3.3.1 Error Identification (level A)
- 3.3.2 Labels or Instructions (level A)
- 3.3.4 Error Prevention (Legal, Financial, Data) (level AA)
- 3.3.7 Redundant Entry (level A)
- 3.3.8 Accessible Authentication (Minimum) (level AA)