WCAG 2.2 Demo SuiteError Prevention (All)
For any page requiring the user to submit information, submissions are reversible, checked and correctable, or confirmed before finalising — extending 3.3.4 to all submissions, not only consequential ones.
Who this affects
All users who make mistakes, and particularly users with cognitive and motor disabilities, on every form rather than only high-stakes ones.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 3.3.6
Open the failing example in a new tab
fail.html — the problem
<h1>Leave a review</h1>
<!-- 3.3.4 at AA applies only to pages with LEGAL, FINANCIAL or DATA
consequences, or that submit test responses. A book review is none of
those, so 3.3.4 does not apply and this page does not fail it.
3.3.6 at AAA extends the same protection to EVERY submission. This form
submits straight away: no review step, no confirmation, no way to edit or
delete afterwards. A user who mis-clicks, or who is not finished writing,
has published something under their name permanently. -->
<form>
<div class="field">
<label for="who">Display name</label>
<input type="text" id="who">
</div>
<div class="field">
<label for="r">Your review</label>
<textarea id="r" rows="5"></textarea>
</div>
<p><small>Reviews are published immediately and cannot be edited or removed.</small></p>
<button type="submit" class="button">Post review</button>
</form>Meets 3.3.6
Open the passing example in a new tab
pass.html — the fix
<h1>Leave a review</h1>
<form id="f">
<div class="field">
<label for="who">Display name</label>
<input type="text" id="who" autocomplete="nickname">
</div>
<div class="field">
<label for="r">Your review</label>
<textarea id="r" rows="5"></textarea>
</div>
<!-- FIX — CHECKED AND CORRECTABLE: a preview step, so nothing is published
without the user seeing exactly what will appear. -->
<button type="button" class="button" id="preview">Preview your review</button>
</form>
<div class="preview" id="out" hidden>
<h2 id="out-h" tabindex="-1">Check your review before posting</h2>
<p><strong id="p-who"></strong> wrote:</p>
<p id="p-r"></p>
<button type="button" class="button" id="post">Post this review</button>
<button type="button" class="button button--secondary" id="edit">Go back and edit</button>
</div>
<p id="done" role="status"></p>
<!-- FIX — REVERSIBLE: and afterwards, it can be undone. Saying so up front is
what lets a nervous user proceed at all. -->
<p>You can edit or delete your review at any time from your account.</p>
<!-- 3.3.6 is satisfied by ANY ONE of the same three routes as 3.3.4 -
reversible, checked and correctable, or confirmed - applied to every form
rather than only consequential ones.
Is this realistic site-wide? For most sites, largely yes, and cheaply:
a preview step on anything published, an undo window on anything
destructive, and inline validation everywhere else covers almost all of it.
The place it gets expensive is high-volume interactions where an extra
confirmation would itself become a barrier - which is a legitimate reason
to meet 3.3.4 at AA and document why 3.3.6 is not claimed. -->How to test it
Confirm every form offers reversibility, validation with correction, or a confirmation step.
-
Automated
Requires walking every submission flow.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 3.3.6 Error Prevention (All) — the W3C explanation, intent and exceptions
- 3.3.6 in the WCAG 2.2 Recommendation — the normative wording