3.3.4 Error Prevention (Legal, Financial, Data)

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

What This Means

For pages that cause legal commitments, financial transactions, or modify/delete user-controlled data, at least one of the following must be true: submissions are reversible, data is verified before final submission, or a confirmation step allows the user to review and correct before committing.

Who This Affects

Cognitive disability users — they are more likely to make input errors and need the ability to review and correct before a binding action
Screen reader users — they may accidentally submit a form when they cannot visually scan all fields at once; a confirmation step lets them verify
Motor impairment users — accidental clicks or keystrokes can trigger irreversible submissions
Everyone — confirmation steps prevent costly mistakes in financial and legal transactions

Common Pitfalls

1. One-click purchase with no review

<!-- Bad: single button completes the purchase -->
<button onclick="processPayment()">Buy Now — $499</button>

<!-- Good: takes user to a review page first -->
<button onclick="goToReview()">Proceed to Review</button>

2. Permanent data deletion with no undo

<!-- Bad: immediately deletes with no confirmation -->
<button onclick="deleteAccount()">Delete Account</button>

<!-- Good: confirmation dialog before destructive action -->
<button onclick="showDeleteConfirmation()">Delete Account</button>

<dialog id="confirm-delete" aria-labelledby="confirm-heading">
  <h2 id="confirm-heading">Delete your account?</h2>
  <p>This will permanently remove all your data. This action cannot be undone.</p>
  <button onclick="deleteAccount()">Yes, delete my account</button>
  <button onclick="closeDialog()">Cancel</button>
</dialog>

3. No way to review form data before legal submission

<!-- Bad: single-page form that submits a contract -->
<form onsubmit="submitContract()">
  <input name="name" placeholder="Full legal name">
  <input name="ssn" placeholder="Social Security Number">
  <textarea name="terms">I agree to...</textarea>
  <button type="submit">Sign Contract</button>
</form>

How to Fix

Provide a review/confirmation step

<!-- Step 1: Fill in order details -->
<form action="/review" method="post">
  <label for="item">Item</label>
  <input id="item" name="item" value="Laptop Pro 16">

  <label for="qty">Quantity</label>
  <input id="qty" name="qty" type="number" value="1">

  <button type="submit">Review Order</button>
</form>

<!-- Step 2: Review before final submission -->
<h2>Review Your Order</h2>
<dl>
  <dt>Item</dt><dd>Laptop Pro 16</dd>
  <dt>Quantity</dt><dd>1</dd>
  <dt>Total</dt><dd>$1,499.00</dd>
</dl>
<form action="/confirm" method="post">
  <button type="submit">Confirm Purchase</button>
  <a href="/cart">Go Back and Edit</a>
</form>

Make submissions reversible

<!-- After deletion, provide an undo window -->
<div role="alert">
  <p>Project "Master Sword" deleted.</p>
  <button onclick="undoDelete()">Undo (available for 30 seconds)</button>
</div>

Verify data before submission

<form onsubmit="return validateBeforeSubmit()">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

  <label for="email-confirm">Confirm Email</label>
  <input id="email-confirm" type="email" name="email_confirm" required>

  <button type="submit">Submit Application</button>
</form>

<script>
function validateBeforeSubmit() {
  const email = document.getElementById('email').value;
  const confirm = document.getElementById('email-confirm').value;
  if (email !== confirm) {
    alert('Email addresses do not match. Please correct before submitting.');
    return false;
  }
  return true;
}
</script>

How to Test

Identify all pages involving financial transactions, legal agreements, or user data modification/deletion.
Walk through each flow (purchase, contract signing, account deletion, data update) and verify at least one safeguard: a review/confirmation step, the ability to undo/reverse the action, or data verification before final submission.
For financial transactions, confirm there is a review page showing the order summary before the final "Confirm" button.
For data deletion, verify a confirmation dialog appears requiring explicit acknowledgment.
Pass: Every legal, financial, or data-modifying action has a review step, undo mechanism, or verification check before finalization.
Fail: Any legal commitment, financial transaction, or data deletion executes immediately with no confirmation, review, or undo option.

axe-core Rules

This criterion cannot be detected by automated tools. It requires understanding of the business context (legal, financial, data modification) and evaluating whether appropriate safeguards are in place.