3.3.3: Error Suggestion

Guideline 3.3.3 ensures that when an input error is detected, suggestions for correction are provided if such suggestions are known. This enhances user experience by helping users identify and correct mistakes efficiently, ensuring successful completion of tasks such as filling out forms.

Importance of 3.3.3: Error Suggestion Success Criterion

Error suggestion is crucial for improving accessibility and usability, especially for users with cognitive disabilities or those who are unfamiliar with the form's requirements. Providing clear and actionable error suggestions helps reduce frustration and errors, leading to a smoother and more inclusive user experience. This is particularly important in forms related to sensitive or critical information, such as financial transactions or personal data.

Primary Use Cases and Requirements Under Guideline 3.3.3: Error Suggestion (Level A)

Use Case 1: Incorrect Email Format

Example: A user enters an email address without the "@" symbol.

Implementation: Display an error message like "Please enter a valid email address. Example: user@example.com."

How to Test: Enter an incorrect email format and verify that an appropriate error suggestion is displayed. Test with a screen reader to ensure the suggestion is announced.

Use Case 2: Password Requirements Not Met

Example: A user enters a password that does not meet the minimum length requirement.

Implementation: Display an error message like "Password must be at least 8 characters long."

How to Test: Enter a short password and verify that the error message provides clear instructions on the required length. Check with a screen reader for accessibility.

Use Case 3: Required Field Left Blank

Example: A user submits a form without filling in a required field.

Implementation: Display an error message like "This field is required. Please fill it in before submitting."

How to Test: Submit the form with a required field left blank and verify the error suggestion. Use a screen reader to confirm that the error message is accessible.

Use Case 4: Invalid Date Format

Example: A user enters a date in an incorrect format.

Implementation: Display an error message like "Please enter the date in MM/DD/YYYY format."

How to Test: Enter a date in an incorrect format and check that the error message provides clear instructions on the correct format. Test with a screen reader to ensure the message is announced.

Testing Steps:

1. Manual Testing: Interact with form fields and deliberately cause errors to verify that error suggestions are displayed and are helpful.

2. Screen Reader Testing: Use a screen reader to navigate through the form and cause errors to ensure that error suggestions are announced properly.

3. Automated Tools: Use automated accessibility testing tools to identify form fields without proper error suggestions. Manually verify flagged elements to ensure compliance.

How to Implement 3.3.3: Error Suggestion

Using HTML5 Validation Attributes

Utilize HTML5 validation attributes to provide basic error suggestions.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
</form>

Custom Validation with JavaScript

Implement custom validation using JavaScript to provide detailed error suggestions.

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span id="emailError" class="error-message" role="alert" aria-live="assertive"></span>
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    var emailField = document.getElementById('email');
    var emailError = document.getElementById('emailError');

    if (!emailField.value.includes('@')) {
      event.preventDefault();
      emailError.textContent = 'Please enter a valid email address. Example: user@example.com.';
      emailField.classList.add('error');
      emailField.setAttribute('aria-invalid', 'true');
    } else {
      emailError.textContent = '';
      emailField.classList.remove('error');
      emailField.removeAttribute('aria-invalid');
    }
  });
</script>

Using ARIA Labels for Additional Context

Use ARIA attributes to provide additional context for screen reader users. This is useful for providing instructions that are not visible on the screen.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" aria-describedby="usernameHelp" required>
  <span id="usernameHelp" class="sr-only">Your username should be unique and contain 5-15 characters.</span>
  <span id="usernameError" class="error-message" role="alert" aria-live="assertive"></span>
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    var usernameField = document.getElementById('username');
    var usernameError = document.getElementById('usernameError');

    if (usernameField.value.length < 5 || usernameField.value.length > 15) {
      event.preventDefault();
      usernameError.textContent = 'Username must be between 5 and 15 characters long.';
      usernameField.classList.add('error');
      usernameField.setAttribute('aria-invalid', 'true');
    } else {
      usernameError.textContent = '';
      usernameField.classList.remove('error');
      usernameField.removeAttribute('aria-invalid');
    }
  });
</script>

Testing and Iteration

Regularly test your website’s forms to ensure error suggestions are clear, specific, and accessible. Conduct usability testing with a diverse group of users, including those with disabilities, to gather feedback and improve error suggestion mechanisms.