WCAG 3.3.3 Error Suggestion: Provide Helpful Error Messages

Last updated: 2026-03-22

Level AA Understandable WCAG 3.3.3

What This Criterion Requires

WCAG 3.3.3 requires that if an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. This builds on criterion 3.3.1 (Error Identification), which requires that errors be identified and described. Criterion 3.3.3 goes further by requiring that the error message also suggests how to fix the problem when possible. For example, if a user enters a date in the wrong format, the error message should not just say Invalid date but should specify the expected format, such as Please enter a date in MM/DD/YYYY format. If a required field is left empty, the message should name the field and indicate that it is required. For fields with constrained values (like a state or country selection), the error should suggest valid values. The security exception allows systems to not suggest corrections when doing so would reveal information, such as not telling users whether a username or password was incorrect during login.

Why It Matters

Generic error messages like Invalid input or Error in form leave users guessing about what went wrong and how to fix it. This is problematic for all users but creates a severe barrier for users with cognitive disabilities who may not be able to infer the correct format or value from a vague error message. Users with learning disabilities need clear, specific instructions to correct their input. Screen reader users benefit from descriptive error messages because they may not be able to see visual cues like red borders or formatting examples that sighted users might notice. Users with low vision may miss subtle visual indicators of what is wrong. Older adults who are less familiar with web conventions appreciate explicit guidance on how to correct their input. Providing specific suggestions dramatically reduces form abandonment and user frustration. For e-commerce sites, every form error that confuses a user is a potential lost sale. Clear, helpful error suggestions are one of the most impactful usability improvements a website can make.

Common Failures and How to Fix Them

Vague error messages without correction guidance

Form validation displays generic error messages that identify an error but provide no information about the expected format or how to correct the input.

Inaccessible 
<div class="form-group">
  <label for="email">Email Address</label>
  <input type="text" id="email" name="email" value="john@" 
    aria-invalid="true" aria-describedby="email-error">
  <span id="email-error" class="error">Invalid input.</span>
</div>

<div class="form-group">
  <label for="phone">Phone Number</label>
  <input type="text" id="phone" name="phone" value="555-1234" 
    aria-invalid="true" aria-describedby="phone-error">
  <span id="phone-error" class="error">Error in this field.</span>
</div>
Accessible 
<div class="form-group">
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" value="john@" 
    aria-invalid="true" aria-describedby="email-error">
  <span id="email-error" class="error" role="alert">
    Please enter a complete email address, for example: [email protected]
  </span>
</div>

<div class="form-group">
  <label for="phone">Phone Number</label>
  <input type="tel" id="phone" name="phone" value="555-1234" 
    aria-invalid="true" aria-describedby="phone-error">
  <span id="phone-error" class="error" role="alert">
    Please include the area code, for example: (555) 555-1234
  </span>
</div>

Constrained field error does not suggest valid values

A field that accepts only specific values shows a generic error when the input does not match, but does not tell the user what valid values are accepted.

Inaccessible 
<label for="state">State</label>
<input type="text" id="state" name="state" value="California" 
  aria-invalid="true" aria-describedby="state-error">
<span id="state-error" class="error">Invalid state.</span>
Accessible 
<label for="state">State (2-letter abbreviation)</label>
<input type="text" id="state" name="state" value="California" 
  maxlength="2" aria-invalid="true" aria-describedby="state-error">
<span id="state-error" class="error" role="alert">
  Please enter a 2-letter state abbreviation, for example: CA, NY, TX
</span>

How to Test

  1. Submit a form with intentionally incorrect data in various fields (wrong formats, out-of-range values, missing required fields) and review the error messages displayed.
  2. Verify that each error message specifically describes what is wrong and suggests how to correct the input, including the expected format or valid values.
  3. Check that error suggestions are programmatically associated with their input fields using aria-describedby so screen readers announce them.
  4. Test with a screen reader to confirm that error suggestions are announced when the user returns to the errored field.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria