3.3.3 Error Suggestion

Introduction¶

This check aims to ensure that users receive appropriate suggestions so that they can correct form input errors.

What¶

When a user submits a form with errors, the error messages must describe the issue and provide clear suggestions on how to fix it.

For example, instead of informing Invalid password, provide a more helpful message such as: The password must be at least 8 characters long and include a number.

Provide specific guidance so that users can quickly understand what went wrong and how to correct it.

Why¶

Users need a way to identify errors and get the information about how to fix them with minimal effort.

Affected users¶

This check primarily affects:

• Users with cognitive disabilities: They may struggle to understand vague error messages.
• Screen reader users: If errors are not described clearly, these users may not know how to fix them.
• Limited technical knowledge: Some users may not be familiar with specific format requirements.

Provide clear and actionable suggestions to improve usability and accessibility for all users.

Examples¶

This section provides some pass and fail examples of this issue.

Pass examples¶

• The error message identifies the problem and offers a solution

  copy

  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required>
  <span id="email-error" style="color: red;">Please enter a valid email address in the format: [email protected].</span>

  Why this works:

  The error message explains the issue and the solution.

• Use aria-describedby for accessible error messages

  copy

  <label for="phone">Phone Number:</label>
  <input type="text" id="phone" name="phone" aria-describedby="phone-error">
  <span id="phone-error" style="color: red;">Phone number must be in the format (123) 456-7890.</span>

  Why this works:

  The error message is linked to the input field so that assistive technologies can read it.

Fail examples¶

• Vague error message

  copy

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <span style="color: red;">Invalid input.</span>

  Issue:

  • The message does not explain what is invalid or how to fix it.

  Fix: Give an informative error message such as:

  • Username must be between 5 and 15 characters long.

• Error message is only conveyed visually, for example a red border around the field.

  copy

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required style="border: 2px solid red;">
  Issue:

  Issue:

  • Users who are colorblind or use screen readers get no guidance on the error.

  Fix: Add a text-based error message such as:

  • Password must be at least 8 characters long.

How¶

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

How to review it¶

This section provides some methods on how to review the issue.

• Test the form submission

  Submit the form with incorrect or missing data and evaluate the response.

• Ensure that error messages explain the issue and also suggest a fix

  Ensure that each input error message provides clear guidance.

• Use a screen reader

  Ensure that screen readers announce error messages properly when errors occur.

• Ensure that error messages are visible and easy to understand

  Error messages cannot be hidden or rely only on color cues.

How to fix it¶

This section provides some methods on how to correct the issue.

• Provide specific suggestions for error correction

  copy

  <label for="card">Credit Card Number:</label>
  <input type="text" id="card" name="card" required aria-describedby="card-error">
  <span id="card-error" style="color: red;">Please enter a 16-digit credit card number without spaces.</span>

  Why this works: The message clearly explains the correct input format.

• Use aria-live for real-time error updates

  copy

  <div role="alert" aria-live="assertive" id="form-error">
  Error: Please enter a valid email address.
  </div>

  Why this works: The error is read aloud immediately when it appears.

• Ensure that errors are not only conveyed visually

  Do not just change an input field’s border to red, but also add a text message to explain the error.

Additional resources¶

WCAG success criteria¶

3.3.3 Error Suggestion