Prevent Errors for All Form Submissions

Disabilities Affected: Cognitive, Hearing, Mobility, Visual

Success Criterion: 3.3.6

Level: AAA

For all web pages where the user must submit information, at least one of the following is true:

Reversible: Submissions are reversible.
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

This extends the principle of error prevention from WCAG 3.3.4 (which applied only to legal/financial/data-modifying actions) to all forms where users submit information. Mistakes can happen in any form submission (e.g., contact forms, comment forms, registration forms). Providing safeguards helps all users avoid submitting incorrect or unintended information.

Fixing the Issue

Apply the same techniques as for WCAG 3.3.4, but to all submission forms:

Implement robust input validation (checked).
Provide a review/confirmation step before final submission (confirmed).
Allow users to easily go back and edit submitted information if possible (reversible). For simple forms like comments or contact requests, input validation and clear feedback might be sufficient. For multi-step or more complex forms, a review step is highly recommended.

Good Code Example

A comment form with client-side validation and server-side checks:

Markup
Preview

<form id="comment-form" action="/submit-comment" method="post">
  <div><label for="comment-text">Your Comment:</label></div>
  <textarea id="comment-text" name="comment" required aria-required="true" rows="5"></textarea>
  <div id="comment-error" role="alert" style="color:red; display:none;"></div>

  <div><label for="comment-email">Email (optional):</label></div>
  <input type="email" id="comment-email" name="email">
  <div id="email-error" role="alert" style="color:red; display:none;"></div>

  <button type="submit">Post Comment</button>
</form>

<script>
  // Example: Basic client-side validation before submission
  const form = document.getElementById('comment-form');
  const commentText = document.getElementById('comment-text');
  const commentError = document.getElementById('comment-error');
  const emailInput = document.getElementById('comment-email');
  const emailError = document.getElementById('email-error');

  form.addEventListener('submit', function(event) {
    let isValid = true;
    // Reset errors
    commentError.textContent = '';
    commentError.style.display = 'none';
    commentText.removeAttribute('aria-invalid');
    emailError.textContent = '';
    emailError.style.display = 'none';
    emailInput.removeAttribute('aria-invalid');


    // Check required comment field
    if (commentText.value.trim() === '') {
       commentError.textContent = 'Comment cannot be empty.';
       commentError.style.display = 'block';
       commentText.setAttribute('aria-invalid', 'true');
       isValid = false;
    }

    // Check optional email format if value entered
    if (emailInput.value.trim() !== '' && !emailInput.checkValidity()) {
       emailError.textContent = 'Please enter a valid email address.';
       emailError.style.display = 'block';
       emailInput.setAttribute('aria-invalid', 'true');
       isValid = false;
    }

    if (!isValid) {
      event.preventDefault(); // Stop submission if errors found
      alert('Please correct the errors before submitting.'); // Provide summary
    }
    // Server-side validation is still crucial!
  });
</script>

Your Comment:

Email (optional):

Bad Code Example

A form that submits data without any validation or confirmation:

Markup
Preview

<form action="https://www.accessitree.com" method="post" target="_blank">
  <div><label for="newsletter-email">Subscribe to Newsletter:</label></div>
  <input type="text" id="newsletter-email" name="email">
  <div><button type="submit">Subscribe</button></div>
</form>

Subscribe to Newsletter:

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