3.3.4 Error Prevention (Legal, Financial, Data)

Introduction¶

This success criteria states that website owners must provide ways for users to confirm, correct, or reverse important submissions.

This document provides information about the Acquia Optimize check: Error Prevention for Legal, Financial, and Data Transactions.

What¶

For web pages that involve legal agreements, financial transactions, user-controlled data changes, or test submissions, there must be safeguards in place to prevent users from making irreversible mistakes.

At least one of the following must be true:

• Submissions are reversible: Users can undo or cancel the submission.
• Users can check and correct input errors before submission: Users can review and fix mistakes before the transaction is finalized.
• A confirmation step is provided: Users can review, confirm, or correct details before they submit the data.

These safeguards prevent accidental errors that can lead to financial loss, legal issues, or loss of critical data.

Why¶

This section provides information about why this criteria is important and provides some examples.

Why is this important?¶

Without error prevention mechanisms, users might:

• Accidentally submit incorrect financial details, which can lead to payment errors.
• Make irreversible legal commitments without proper review.
• Lose important user-generated data without a way to recover it.

Users with cognitive disabilities can find complex forms and transactions difficult. Give users a chance to review and confirm transaction details to ensure accessibility and usability.

Examples¶

This section provides some pass and fail examples for this criteria.

Pass examples¶

• Provide a way for users to undo a submission

  Implementation: A cancellation window for financial transactions.

  copy

  <p>Your payment has been submitted. You have 30 minutes to cancel this transaction.</p>
  <button onclick="cancelTransaction()">Cancel Payment</button>

  • Why this works:
    • The transaction is reversible within a time limit.

• Provide a review and confirmation step before final submission

  Implementation: A review page before the user submits a loan application.

  copy

  <h2>Review Your Application</h2>
  <p>Please check your details before submitting:</p>
  <ul>
    <li>Name: John Doe</li>
    <li>Email: [email protected]</li>
    <li>Loan Amount: $10,000</li>
  </ul>
  <button onclick="goBack()">Edit Information</button>
  <button onclick="submitApplication()">Confirm and Submit</button>

  • Why this works:
    • Users can review and correct errors before they finalize the transaction.

• Highlight errors before submission

  Implementation: Validate the user input and provide clear error messages.

  copy

  <form onsubmit="return validateForm()">
    <label for="credit-card">Credit Card Number:</label>
    <input type="text" id="credit-card" name="credit-card" required>
    <span id="card-error" style="color: red;"></span>
    <button type="submit">Submit Payment</button>
  </form>
  <script>
    function validateForm() {
      let cardNumber = document.getElementById("credit-card").value;
      if (cardNumber.length !== 16) {
        document.getElementById("card-error").innerText = "Credit card number must be 16 digits.";
        return false;
      }
      return true;
    }
  </script>

  • Why this works:
    • Users must correct errors before they can submit the form, which can prevent costly mistakes.

Fail examples¶

• No option to cancel a financial transaction

  Problem: A user accidentally sends money with no way to undo it.

  copy

  <p>Your payment has been processed.</p>

  • Issue:
    • There is no option to cancel or undo the transaction.
  • Fix:
    • Allow users to cancel within a time limit or add a review step before the final submission.

• No review step before a legal agreement

  Problem: Clicking Agree immediately submits a legally binding contract.

  copy

  <input type="checkbox" id="agree"> I agree to the terms  
  <button type="submit">Submit</button>

  • Issue:
    • Users cannot review the agreement before submission.
  • Fix:
    • Add a review page before finalizing the agreement.

• No validation for critical input fields

  Problem: A form allows submission with incomplete or incorrect data.

  copy

  <form>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    <button type="submit">Submit</button>
  </form>

  • Issue:
    • Users can submit an empty or incorrect email, which can cause issues.
  • Fix:
    • Add real-time validation and display errors before submission.

How¶

This section provides instructions on how to review and fix the issue.

How to review it¶

Determine if the page includes legal, financial, or user-controlled data transactions.

1. Examples: Payments, legal agreements, saving personal data, test submissions. If the page includes any of the above:
2. Check if the page provides any of the following safeguards:
   ✅ Users can cancel or undo their submission.
   ✅ Users can review and correct errors before submission.
   ✅ A confirmation step allows users to verify their data before they finalize the transaction.
3. Test error handling:
   • Enter incorrect data and verify whether the system prevents submission until the errors are corrected.
   • Check if error messages provide clear guidance on how to fix mistakes.
4. Confirm assistive technology support:
   • Use a screen reader to verify that error messages and confirmation steps are accessible.

How to fix it¶

This section provides some ways to correct the issue.

• Allow users to cancel transactions within a time window

  • Example: You have 30 minutes to cancel this order.

• Provide a review step before submission

  • Example: Please review your details before submitting.

• Validate user input and display errors before submission

  • Example: Show real-time error messages for incorrect credit card numbers or missing fields.

• Use ARIA live regions for error messages

  copy

  <div role="alert" aria-live="assertive"> 
    Error: Please enter a valid phone number. 
  </div> 
  

  • Why this works: Errors are immediately announced to screen reader users.

Additional resources¶

WCAG success criteria¶

WCAG 3.3.4 Error Prevention (Legal, Financial, Data)