Error message does not identify (in text or programmatically) which field has the error.

Link to Error message does not identify (in text or programmatically) which field has the error. copied to clipboard

Description

Error message does not identify (in text or programmatically) which field has the error.

Rule

An error message MUST identify (in text or programmatically) which field has the error.

Background

People who are blind cannot use the visual layout of a form to determine which form element contains an error. Because of this, error messages must specifically identify the field other by containing the name of the form element, or by being programmatically associated with the form element. When error messages and form elements are textually or programmatically associated, a screen reader user can be certain to which form element an error message applies.

Code Examples

form-error-field-relationships

Good Example:

Error location described both textually and programmatically:

<label for="zip">Zip Code</label>
<input type="text" id="zip" aria-describedby="zip-err">
<div id="zip-err">Error: Zip code must have 5 digits</div>

Failure Example:

Error message is not associated with it's element:

<span class="errMsg">Error: Please complete all required fields.</span>
<label for="name">Name:*</label>
<span class="red-exclamation-triangle"></span>
<br>
<input type="text" name="name" id="name" aria-required="true">

How To Fix

Fix this issue by doing ONE or BOTH of the following:

  1. Include the form element name in the error message.
  2. Programmatically associate the error message with the field using the aria-describedby attribute.

Don't do this:

  • Rely on visual information such as highlighting to convey the location of an error.
  • Give nonspecific errors, such as "Complete all required fields."
  • Rely on color and icons to convey which field has an error.

References