Accessible Error Messages

Ensuring form error messages are accessible to assistive technologies (e.g., screen readers) is essential. While there are multiple valid approaches, accessible error handling should address these core requirements:

Core Principles

Be Explicit

Error feedback must clearly indicate an error state. Visual cues alone, such as a red outline, are not sufficient, and messages like “Email Address Is Required” should include an explicit indicator such as “Error: Email Address Is Required.”

The aria-invalid attribute also communicates errors to screen reader users, but it does not provide equivalent feedback to all users. It should supplement, not replace, visible error text.

Associate Programmatically

Error text must be connected to the corresponding input programmatically (not just placed nearby). This is commonly done with aria-describedby referencing an error container. The referenced element should exist in the DOM on page load (it may be empty until an error occurs).

Provide Guidance

Error messages should clearly explain what went wrong and how to fix it; a generic “error” is insufficient. If a required field is missing, state that explicitly. If the issue is a formatting problem (such as an invalid email address), indicate the expected format.

Ensure Persistence

Error messages must remain visible until the user resolves the issue. They should not disappear automatically.

Maintain Color Contrast

The rules for color contrast apply to error messages too. Note that pure red (#ff0000) on white (#ffffff) does not have sufficient contrast.

Recommended Implementation

Default State

<label for="email">Email<sup>*</sup></label>
<input id="email" type="email" autocomplete="email" aria-describedby="email-error" required aria-invalid="false">
<div id="email-error"></div>

Error State

<label for="email">Email<sup>*</sup></label>
<input id="email" type="email" autocomplete="email" aria-describedby="email-error" required aria-invalid="true">
<div id="email-error">Error: Email Address is Required</div>