3.3.6 Error Prevention (All)

Level: AAA | Principle: Understandable | Since: WCAG 2.0 | Automation: Manual

What This Means

For all web pages that require the user to submit information, at least one of the following must be true: submissions are reversible, data is checked for errors and the user gets a chance to correct them, or a mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

This is the stricter version of the Level AA criterion 3.3.4, which only requires error prevention for submissions that cause legal commitments or financial transactions. At AAA, every form submission — contact forms, search forms, profile updates, comment boxes, everything — must have error prevention.

The three approaches are: (1) Reversible — the user can undo the submission after the fact, (2) Checked — input is validated and the user can fix errors before final submission, (3) Confirmed — a review step shows all entered data and requires explicit confirmation.

Who This Affects

  1. Users with motor disabilities — may accidentally click submit or mistype due to limited dexterity
  2. Users with cognitive disabilities — may not notice errors before submitting
  3. Screen reader users — may miss form fields or enter data in the wrong field
  4. All users — everyone makes mistakes; error prevention reduces frustration

Common Pitfalls

1. Form submits immediately with no confirmation

<!-- Bad: immediate submission with no review -->
<form action="/delete-account" method="POST">
  <button type="submit">Delete Account</button>
</form>

<!-- Good: confirmation step before destructive action -->
<form action="/delete-account" method="POST" id="delete-form">
  <button type="button" onclick="showConfirmation()">Delete Account</button>
</form>
<dialog id="confirm-dialog" role="alertdialog" aria-labelledby="confirm-title">
  <h2 id="confirm-title">Confirm Account Deletion</h2>
  <p>Are you sure you want to delete your account? This action cannot be undone.</p>
  <button onclick="submitDelete()">Yes, delete my account</button>
  <button onclick="closeDialog()">Cancel</button>
</dialog>

2. No way to undo a submission

<!-- Bad: comment posted with no edit or delete option -->
<form action="/post-comment" method="POST">
  <textarea name="comment" required></textarea>
  <button type="submit">Post Comment</button>
</form>

<!-- Good: allow editing or deleting after submission -->
<form action="/post-comment" method="POST">
  <textarea name="comment" required></textarea>
  <button type="submit">Post Comment</button>
</form>
<!-- After posting: -->
<div class="comment">
  <p>Your comment text here</p>
  <button onclick="editComment(123)">Edit</button>
  <button onclick="deleteComment(123)">Delete</button>
</div>

3. No validation before submission

<!-- Bad: form submits without checking inputs -->
<form action="/register" method="POST">
  <input type="email" name="email">
  <input type="password" name="password">
  <button type="submit">Register</button>
</form>

<!-- Good: client-side validation with clear error messages -->
<form action="/register" method="POST" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required aria-describedby="email-error">
  <p id="email-error" class="error" hidden></p>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" required minlength="8" aria-describedby="password-error">
  <p id="password-error" class="error" hidden></p>
  <button type="submit">Register</button>
</form>

How to Test

  1. Identify every form on the site, including search forms, contact forms, settings pages, comment boxes, and profile updates.
  2. Submit each form and verify at least one error-prevention mechanism: the submission is reversible (edit/undo), data is validated before submission, or a confirmation step exists.
  3. For forms that modify data (profile updates, settings), verify the user can review changes before they are saved.
  4. For comment or post submissions, verify the user can edit or delete after submission.
  5. Pass: Every form on the site has at least one error-prevention mechanism: reversibility, validation, or confirmation.
  6. Fail: Any form submits immediately with no validation, confirmation step, or ability to undo the submission.

How to Fix

  1. Add client-side validation to all forms to catch errors before submission
  2. Provide a confirmation/review step for any form that modifies data or creates records
  3. Allow users to edit or undo submissions where possible (edit comments, cancel orders)
  4. For irreversible actions, use a confirmation dialog that requires explicit user acknowledgment
  5. Display a summary of all entered data on a review page before the final submit button

Resources

  1. WCAG Understanding 3.3.6
  2. How to Meet 3.3.6