Provide Suggestions for Correcting Input Errors

Disabilities Affected: Cognitive, Mobility, Visual

Success Criterion: 3.3.3

Level: AA

If an input error is automatically detected and suggestions for correction are known, then these suggestions must be provided to the user, unless it would jeopardize the security or purpose of the content.

Why It Matters

Simply identifying an error (like “Invalid format”) might not be enough for users to understand how to fix it. Providing specific suggestions (e.g., “Date must be in YYYY-MM-DD format,” or suggesting corrections for a misspelled username if feasible) reduces cognitive load and helps users correct mistakes more easily and efficiently. This is particularly helpful for users with cognitive or learning disabilities.

Fixing the Issue

When providing error messages (as per WCAG 3.3.1), include helpful suggestions if possible. For format errors, state the required format clearly. If a username is taken, state that clearly instead of just “Invalid username.” If a password doesn’t meet complexity rules, list the specific rules it failed. Be careful not to reveal sensitive information (e.g., don’t suggest valid usernames if the entered one is close but incorrect during login).

Good Code Example

Providing a helpful suggestion alongside the error message:

Markup
Preview

<form action="https://www.accessitree.com/wcag-ultimate-guide/" target="_blank" method="post">
  <div>
    <label for="event-date">Event Date:</label>
    <input type="text" id="event-date" name="event_date"
           aria-invalid="true"
           aria-describedby="date-error">
    <span id="date-error" style="color: red; display: block;">
       Error: Invalid date format. Please use YYYY-MM-DD format (e.g., 2025-12-31).
    </span>
  </div>
  <button type="submit">Submit</button>

  <style>
    input[aria-invalid="true"] { border: 2px solid red; }
  </style>
</form>

Event Date: Error: Invalid date format. Please use YYYY-MM-DD format (e.g., 2025-12-31).

Bad Code Example

Error message identifies the error but offers no suggestion for correction:

Markup
Preview

<form action="https://www.accessitree.com/wcag-ultimate-guide/" target="_blank" method="post">
  <div>
    <label for="event-date">Event Date:</label>
    <input type="text" id="event-date" name="event_date"
           aria-invalid="true"
           aria-describedby="date-error">
    <span id="date-error" style="color: red; display: block;">
       Error: Invalid date.
    </span>
  </div>
  <button type="submit">Submit</button>

  <style>
    input[aria-invalid="true"] { border: 2px solid red; }
  </style>
</form>

Event Date: Error: Invalid date.

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