Prevent Errors for Legal, Financial, or Data Submission Actions

Disabilities Affected: Cognitive, Hearing, Mobility, Visual

Success Criterion: 3.3.4

Level: AA

For web pages that cause legal commitments or financial transactions for the user, modify or delete user-controllable data in data storage systems, or submit user test responses, at least one of the following must be true:

Reversible: Submissions are reversible (can be undone).
Checked: Data entered by the user is checked for input errors, and the user is provided an opportunity to correct them.
Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Why It Matters

Mistakes during critical actions like making a purchase, transferring funds, deleting data, or submitting a test can have serious consequences. Users, especially those prone to making errors due to cognitive or motor impairments, need safeguards to prevent or correct such mistakes before they become final.

Fixing the Issue

Implement confirmation steps for critical actions. Before finalizing a purchase, display an order summary page allowing the user to review items, shipping details, and costs, and provide options to edit or cancel. Before permanently deleting data, use a confirmation dialog (e.g., “Are you sure you want to delete this item? This action cannot be undone.”) with clear “Confirm” and “Cancel” options. Validate user input (as per WCAG 3.3.1 and 3.3.3) before submission. If possible, allow users to undo actions (e.g., restore deleted items from a trash bin for a period).

Good Code Example

A confirmation step before submitting an order:

Markup

<form action="/review-order" method="post">
  <button type="submit">Review Your Order</button>
<h1>Review Your Order</h1><div class="order-summary"> ... </div><form action="/place-order" method="post">
  <a href="/edit-order">Edit Order</a> <button type="submit">Place Order</button> <a href="/cancel-order">Cancel Order</a> </form></form>

Bad Code Example

Deleting user data with a single click and no confirmation:

Markup

<div>User Profile Data... <button onclick="deleteProfile()">Delete Profile</button></div>

<script>
  function deleteProfile() {
    // Immediately sends delete request without confirmation
    // fetch('/api/delete-profile', { method: 'POST' });
    alert("Profile Deleted."); // Too late!
  }
  // A single accidental click permanently deletes data. This fails WCAG 3.3.4.
</script>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult