Why a11y?

Why Accessible Error Identification and Feedback Matter

Providing clear and accessible error messages is crucial for all users, especially those with disabilities. Properly implemented error feedback ensures:

  • Users with visual impairments or those using screen readers are informed of errors.
  • Keyboard-only users can easily navigate to errors and correct them.
  • Cognitive and language-impaired users can understand and resolve form issues with minimal confusion.

Error identification is part of the WCAG 2.1 guidelines under Success Criterion 3.3, which focuses on input assistance.

Best Practices for Accessible Error Messages

Visible and Descriptive Error Messages

Error messages should be visually apparent, and they must describe the problem in a clear and understandable way.

Good Practice:

  • Place the error message near the field that caused the error, so the user can quickly understand what needs correction.
  • Make the error message text clear and explain what went wrong. 
    <label for="email">Email Address</label>
<input id="email" type="text" name="email" aria-describedby="email-error" />
<span id="email-error" class="error">Please enter a valid email address.</span>

Use of Color and Text for Error Indication

Avoid relying on color alone to indicate errors, as colorblind users may not perceive red or other color indicators. Instead, combine color with text and icons for better clarity.

Bad Practice:

<span style="color: red;">Error: This field is required.</span>

Good Practice: Combine color with text and/or icons.

<span id="error" class="error-text" style="color: red;">
	<i class="fas fa-exclamation-circle"></i> Please enter a valid number.
</span>

Provide Accessible Error Messages for Screen Readers

Use ARIA attributes like aria-describedby to associate error messages with their corresponding input fields, allowing screen reader users to perceive the errors effectively.

<label for="username">Username</label>
<input type="text" id="username" aria-describedby="username-error">
<span id="username-error" class="error">Username is required.</span>

The aria-describedby attribute ensures the screen reader announces the error message when focusing on the input field.

Ensure Keyboard Focus Moves to Error Messages

For users who navigate using the keyboard, move the focus to the first error after form submission so that they are immediately aware of the problem.

Example (with JavaScript):

document.getElementById('username') .focus();

By moving focus to the problematic field, you help keyboard users identify and resolve the issue quickly.

Error Suggestions for User Correction

Provide Suggestions for Error Resolution

When possible, guide users on how to correct their mistakes. This is particularly important for inputs with specific formats (e.g., dates, phone numbers, email addresses).

<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" aria-describedby="phone-error">
<span id="phone-error" class="error">Enter a phone number in the format: (123) 456-7890</span>

Providing format examples helps users correct their input more easily, minimizing frustration.

Use Simple and Clear Language

Ensure that error messages are concise, clear, and avoid jargon. Use language that is easy to understand for users with cognitive disabilities or limited technical knowledge.

  • Bad Practice: “Field input does not match required regex pattern.”
  • Good Practice: “Please enter a valid phone number.”

Accessible Error Handling for Forms with Legal or Financial Data

Forms involving sensitive information (such as legal or financial data) require an additional layer of care. Users should be able to:

  • Review their input before submission.
  • Correct any errors without losing entered data.
  • Confirm the submission before finalizing.

Before finalizing a purchase or submitting legal information, present a summary of the input data, allowing the user to review and make changes before committing.

Testing Accessibility of Error Feedback

Manual Keyboard Testing

  • Ensure that after an error occurs, focus automatically shifts to the first error field.
  • Verify that users can navigate through all error messages using only the Tab key.

Screen Reader Testing

Test your form’s error handling using a screen reader (e.g., NVDA or VoiceOver) to ensure that error messages are properly announced and associated with the corresponding fields.

Automated Testing Tools

Use accessibility auditing tools like Axe, WAVE, or Lighthouse to identify common accessibility issues related to forms and error messages.

Related links