Understandable · 3.3 Input Assistance
For any page that requires the user to submit information, at least one safeguard must apply: the submission is reversible, input is checked for errors with a chance to correct them, or the user can review, correct, and confirm the information 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.
Write a short review with a spelling mistake and press Post review. See whether each version lets you check it, correct it or take it back.
The tools follow the version you last used.
What happened
Why it passes
You see your review before it is posted and can edit or confirm it. After posting, Undo takes it back for 10 seconds.
Why it fails
The review goes public the moment you press the button, and the page says it cannot be changed. A typo or a half-written review stays online.
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="/reviews" method="post"> <label for="review">Your review</label> <textarea id="review" name="review"></textarea> <button type="submit">Post review</button> <p>Reviews cannot be edited or deleted after posting.</p></form>The text goes public at once. A typo, or a review sent by accident, cannot be checked, corrected or taken back.
Passes
Live preview
<h2>Check your review</h2><blockquote>Good lamp, but the cable is too short for my desk.</blockquote><form action="/reviews/publish" method="post"> <button type="submit">Post review</button> <a href="/reviews/edit">Edit review</a></form>The user reads the review as others will see it and can edit it before confirming. At AAA this safeguard is needed on any form that submits information, not only payments.
Fails
Live preview
<form action="/contact" method="post" novalidate> <label for="email">Your email</label> <input id="email" name="email" type="email"> <label for="message">Message</label> <textarea id="message" name="message"></textarea> <button type="submit">Send</button></form>novalidate turns off the browser's checks, and if the server does not check either, a mistyped email address is accepted and the reply never arrives.
Passes
Live preview
const form = document.getElementById("contact");const undo = document.getElementById("undo");const message = document.getElementById("send-status");const timer = setTimeout(() => { fetch("/api/messages", { method: "POST", body: new FormData(form) });}, 10000);message.textContent = "Sending in 10 seconds.";undo.hidden = false;undo.addEventListener("click", () => { clearTimeout(timer); message.textContent = "Not sent. You can edit your message."; undo.hidden = true;});The message waits 10 seconds before it is sent, and Undo cancels it, so the submission can be reversed if the user spots a mistake.
Why it matters
People with cognitive, motor, or visual disabilities are more likely to make mistakes they cannot easily spot. Applying safeguards to all submissions, not only high-stakes ones, lets them catch and fix errors.
W3C: Understanding 3.3.6Level 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