Understandable · 3.3 Input Assistance
For pages that create legal commitments or financial transactions, change or delete user-controllable stored data, or submit test responses, at least one must apply: the submission is reversible, input is checked with a chance to correct it, or the user can review, correct, and confirm before finalizing.
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 5000 in Amount when you meant 500, and press Send money. See whether each version lets you check and correct it.
The tools follow the version you last used.
What happened
Why it passes
You see a summary to check before anything is sent, with Edit to correct it, and you can still undo for 10 seconds after you confirm.
Why it fails
The transfer goes through the moment you press the button, and the page says it cannot be changed. One wrong key costs real money.
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
<form action="/pay" method="post"> <label for="amount">Amount</label> <input id="amount" name="amount" inputmode="decimal"> <button type="submit">Pay now</button> <p>All payments are final.</p></form>One press sends the money. There is no check, no review step and no way to cancel, so a mistyped amount cannot be caught.
Passes
Live preview
<h2>Check your transfer</h2><dl> <dt>To</dt><dd>Priya Sharma, account ending 8821</dd> <dt>Amount</dt><dd>₹500.00</dd></dl><form action="/transfer/confirm" method="post"> <button type="submit">Confirm and send</button> <a href="/transfer/edit">Change these details</a></form>The user sees what they entered, can go back and correct it, and must confirm before anything is sent (G98).
Fails
Live preview
document.getElementById("delete-account").addEventListener("click", async () => { await fetch("/api/account", { method: "DELETE" }); location.href = "/goodbye";});A single click, perhaps by mistake, permanently deletes the account and all its stored data, with no confirmation and no way back.
Passes
Live preview
<form action="/account/delete" method="post"> <p>This permanently deletes your account, your orders and your saved addresses.</p> <input type="checkbox" id="confirm-delete" name="confirm-delete" required> <label for="confirm-delete">I understand that my account cannot be recovered</label> <button type="submit">Delete my account</button></form>The user must select the checkbox that states the consequence before the form will submit, so a stray click cannot delete the data.
Why it matters
People with cognitive or motor disabilities, and screen reader users, are more likely to make mistakes they cannot easily spot. A safeguard prevents serious consequences such as a wrong payment, an unintended contract, or lost data.
W3C: Understanding 3.3.4Level 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