Understandable · 3.3 Input Assistance
When an input error is detected automatically and ways to correct it are known, those suggestions must be given to the user, unless doing so would jeopardize the security or purpose of the content, such as giving away the answers in a test.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Type 5 Nov in Date of travel and an email address without an @, then press Find trains. See whether the message tells you how to fix each field.
The tools follow the version you last used.
What happened
Why it passes
Each message names the field and shows an example of what the site expects, such as 25/12/2026 for the date, so you can fix it on the first try.
Why it fails
A single line says there is an error. It does not say which field is wrong or what the site expects, so you have to guess and try again.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<label for="travel-date">Date of travel</label><input id="travel-date" name="travel-date" value="5 Nov" aria-invalid="true" aria-describedby="travel-date-error"><p id="travel-date-error">Invalid date.</p>The error is identified, so 3.3.1 is met, but the site knows the format it wants and does not say it. The user has to guess.
Passes
Live preview
<label for="travel-date">Date of travel</label><input id="travel-date" name="travel-date" value="5 Nov" aria-invalid="true" aria-describedby="travel-date-error"><p id="travel-date-error">Enter the date as DD/MM/YYYY, for example 05/11/2026.</p>The message tells the user how to fix the entry and gives an example in the expected form (G85).
Fails
Live preview
<label for="new-password">Create a password</label><input id="new-password" name="new-password" type="password" autocomplete="new-password" aria-invalid="true" aria-describedby="password-error"><p id="password-error">This password is not allowed.</p>The user is not told which rule the password broke, so they may try again and again or give up, although the site knows exactly what is missing.
Passes
Live preview
function passwordProblem(value) { if (value.length < 12) { return "Use at least 12 characters. This password has " + value.length + "."; } if (!/[0-9]/.test(value)) { return "Add at least one number, for example 7."; } return "";}Each message names the rule that failed and how to meet it. Show it next to the field and link it with aria-describedby, as in the date example.
Why it matters
People with cognitive, learning, or language disabilities, and people with limited vision or motor difficulties, may struggle to work out how to fix an error. Specific suggestions help them correct input quickly instead of guessing.
W3C: Understanding 3.3.3Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures