Understandable · 3.3 Input Assistance
Context-sensitive help must be available, meaning help about the specific function or field the user is working on, such as instructions, examples of valid input, or a help link. It is only needed where the label alone does not explain what is required.
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.
Imagine you do not know what counts as an allowable expense. Look for help in each version without leaving the form.
The tools follow the version you last used.
What happened
Why it passes
Each difficult field has its own help button. It opens a short explanation right next to the field, and a screen reader says whether the help is open.
Why it fails
The only help is a link to a general help center. You would have to leave the form and search, and you might lose your place.
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="tax-ref">Tax reference</label><input id="tax-ref" name="tax-ref" inputmode="numeric"><label for="expenses">Allowable expenses</label><input id="expenses" name="expenses" inputmode="decimal"><p><a href="/help">Help center</a></p>Someone unsure what counts as an allowable expense must leave the form and search a general help center. No help is tied to the field they are stuck on.
Passes
Live preview
<label for="tax-ref">Tax reference</label><p id="tax-ref-hint">The 10-digit number at the top of letters from the tax office, for example 1234567890.</p><input id="tax-ref" name="tax-ref" inputmode="numeric" aria-describedby="tax-ref-hint">The help sits where it is needed. It says where to find the number and shows what a valid one looks like (G89).
Passes
Live preview
<label for="expenses">Allowable expenses</label><button type="button" aria-expanded="false" aria-controls="expenses-help"> What counts as an allowable expense?</button><div id="expenses-help" hidden> <p>Costs you paid only to run your business, such as stock, rent for a work unit and business travel. Do not include personal costs.</p></div><input id="expenses" name="expenses" inputmode="decimal">The help is one press away from the field it explains, and aria-expanded tells screen reader users whether it is open.
Passes
Live preview
const button = document.querySelector("[aria-controls='expenses-help']");const help = document.getElementById("expenses-help");button.addEventListener("click", () => { const open = button.getAttribute("aria-expanded") === "true"; button.setAttribute("aria-expanded", String(!open)); help.hidden = open;});The same button opens and closes the help and keeps aria-expanded in step with what is shown.
Why it matters
People with cognitive, language, or learning disabilities, and anyone unfamiliar with a task, benefit from guidance at the point of need. Help tied to the current step reduces errors and abandoned forms.
W3C: Understanding 3.3.5Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures