Understandable · 3.3 Input Assistance
When content requires user input, labels or instructions must be presented so users know what data is expected. This includes indicating required fields and explaining any expected format or input rules that are not obvious.
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 into every field of each version, then look at what is left on screen. Check what the screen reader preview says for each field.
The tools follow the version you last used.
What happened
Why it passes
Every field has a label that stays on screen while you type. The three date boxes are grouped as Date of birth with an example, and the form says that all fields are required.
Why it fails
The fields have only placeholder text, which disappears when you type, so you can forget what a field was for. Nothing says the three small boxes are your date of birth or that every field is required.
Examples
Five 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
<input type="email" name="email" autocomplete="email" placeholder="Email address">The hint disappears as soon as the user types, and placeholder text is usually pale. It is not a lasting label, so people can lose track of what the field is for.
Passes
Live preview
<label for="email">Email address</label><p id="email-hint">We will send your interview details to this address.</p><input id="email" name="email" type="email" autocomplete="email" aria-describedby="email-hint">The label stays on screen while the user types and is tied to the field with for and id (H44). The hint says what the address is for.
Fails
Live preview
<input name="dob-day" inputmode="numeric" size="2" placeholder="DD"><input name="dob-month" inputmode="numeric" size="2" placeholder="MM"><input name="dob-year" inputmode="numeric" size="4" placeholder="YYYY">Nothing says that these three boxes are the date of birth. Once the user starts typing, even the order of day and month is gone.
Passes
Live preview
<fieldset> <legend>Date of birth</legend> <p id="dob-hint">For example, 27 3 1990</p> <label for="dob-day">Day</label> <input id="dob-day" name="dob-day" inputmode="numeric" size="2" autocomplete="bday-day" aria-describedby="dob-hint"> <label for="dob-month">Month</label> <input id="dob-month" name="dob-month" inputmode="numeric" size="2" autocomplete="bday-month" aria-describedby="dob-hint"> <label for="dob-year">Year</label> <input id="dob-year" name="dob-year" inputmode="numeric" size="4" autocomplete="bday-year" aria-describedby="dob-hint"></fieldset>The legend names the group (H71), each box has its own label, and the example shows the expected order before the user starts.
Passes
Live preview
<label for="new-password">Create a password (required)</label><p id="password-rule">Use at least 12 characters.</p><input id="new-password" name="new-password" type="password" autocomplete="new-password" minlength="12" required aria-describedby="password-rule">The label says the field is required, and the rule is given before the user types, not only in an error message afterward.
Why it matters
Clear labels and instructions help everyone avoid mistakes, and especially help people with cognitive, language, or learning disabilities, screen reader users, and people using magnification complete forms with confidence.
W3C: Understanding 3.3.2Level A
Level A is the minimum: failing it can shut some people out completely.
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