3.3.1 Error Identification

Introduction¶

This success criteria states that website owners must provide a descriptive notification of errors that occur when a user incorrectly fills out a form field.

What¶

When a user fills out a form, any errors in their input must be clearly described in the error message text. If a mistake such as a missing required field or an invalid format is detected, the user must receive a text-based error message that explains what went wrong and how they can fix it.

The error message must:

• Highlight the specific field with the error.
• Clearly explain what is wrong, for example, Email address is required.
• Provide guidance on how to fix the issue,  for example, Please enter a valid email in the format: [email protected].

Why¶

Why is this important?¶

Provide clear, text-based error messages to improve usability and accessibility for all users, especially those who:

• Use screen readers: Audio feedback helps these users understand the issue.
• Have cognitive disabilities: Clear instructions reduce confusion.
• Rely on keyboard navigation: These users may not notice visual cues such as color changes on an incorrectly submitted form field.

If an error message is only conveyed through color or icons, users with visual impairments might miss it. Ensure that the message is presented in text.

Examples¶

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

Pass examples¶

• Error message displayed in text and linked to the input field

  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.</span>

  • Why this works:
    • The error message is in text and clearly describes the issue.
    • It is associated with the input field, which helps assistive technologies relay the error.

• Use aria-describedby to associate an error message with an input field

  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, which makes it accessible to screen readers.

Fail examples¶

• Error message is only communicated through color or icons:

  copy

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

  • Issue:
    • Users who are colorblind or use screen readers may not understand the issue because there is no text.
  • Fix:
    • Add a text-based error message such as Username is required.

• Error message is missing or vague:

  copy

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  • Issue:
    • If the field is empty, the user gets no feedback on what went wrong.
  • Fix:
    • Display a clear error message such as Password must be at least 8 characters long.

How¶

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

How to review it¶

• Test the form validation
  1. Submit the form with incorrect or missing information.
  2. Check if an error message is displayed in text for the incorrect fields.
  3. Ensure that each invalid input field has a corresponding text message that explains the error.
• Verify screen reader compatibility
  • Use a screen reader such as NVDA or VoiceOver to ensure that error messages are announced when errors occur.
• Make sure that error messages are visible and readable
  • They must not be hidden, rely only on color, or be difficult to find.

How to fix it¶

• Provide descriptive error messages near the input field:

  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 valid 16-digit credit card number.</span>

  • Why this works: The message clearly explains the issue and how to fix it.

• Use aria-live for real-time error updates:

  copy

  <div role="alert" aria-live="assertive" id="form-error">
    Error: Please correct the highlighted fields.
  </div>

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

• Ensure that errors are not only conveyed visually:

  Do not only change the border of an input field to red, for example. Instead, add a text message that explains the error.

Additional resources¶

WCAG success criteria¶

3.3.1 Error Identification