Technique ARIA21:Using aria-invalid to Indicate An Error Field

Example 1: Using aria-invalid on required fields

The aria-invalid attribute is used on required fields that are empty when the form is submitted. A message above the form tells the user that there are form fields that need to be completed.

HTML:

<form name="signup" id="signup" method="post" action="">
  <p id="errors" aria-live="assertive"></p>
  <div>
    <label for="first">First Name (required)</label>
    <input aria-invalid="false" autocomplete="given-name" id="first" name="first" type="text">
  </div>
  <div>
    <label for="last">Last Name (required)</label>
    <input aria-invalid="false" autocomplete="family-name" id="last" name="last" type="text">
  </div>
  <div>
    <label for="email">Email (required)</label>
    <input aria-invalid="false" autocomplete="email" id="email" name="email" type="text">
  </div>
  <div>
    <button id="button" type="submit">Sign Up</button>
  </div>
</form>

CSS:

label.failed {
  background:#CE0000;
  color:#fff;
}

JavaScript:

These are the two JavaScript functions that set the aria-invalid="true" attribute and then create the validation error message:

const requiredFields = ['first', 'last', 'email'];
let errorCount = 0;
		
requiredFields.forEach(fieldId => {
  const field = document.getElementById(fieldId);
  if (field.value.trim() === '') {
    field.setAttribute('aria-invalid', 'true');
    document.querySelector(`label[for='${fieldId}']`).classList.add('failed');
    errorCount++;
  }
});
		
if (errorCount > 0) {
  errText.textContent = `Please complete all ${errorCount} required ${errorCount === 1 ? 'field' : 'fields'} and retry`;
}

Working example: Using aria-invalid on required fields.

Example 2

Identifying errors in data format

In this example, aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.

Features

• Adds an aria-invalid="true" attribute on a form field if the entered data is missing or not in the expected format:
  • The PIN contains fewer than 4 characters;
  • The email address doesn't meet the required format;
  • The last name must contain at least two letters;
  • The policy start date is before today's date.
• Displays an error message which is programmatically connected to the relevant form field using the aria-describedby attribute.

HTML:

<div class="control">
  <label for="pin4">PIN * (4 digits)</label> 
  <input id="pin4" name="pin4" pattern="\d{4}" size="4" type="text" aria-describedby="pin4-errormsg" aria-invalid="true" class="error">
  <span class="errtext" id="pin4-errormsg">Error: PIN is required</span>
</div>

CSS:

.error {
  border: #CE0000 thin solid;
}
	
.errtext {
  background: #EEEEFF url('error-icon.svg') no-repeat right 0.25em center;
  color:#CE0000;
  display:block;
  margin-bottom: 1em;
  max-width: fit-content;
  padding: .25em 1.6em .25em .25em;
}

JavaScript:

JavaScript is needed to add aria-invalid, aria-describedby, and class attributes as well as appending the error text. This function is the relevant part of the larger validation script:

function addFieldError(field, message) {
  const errId = field.id + '-errormsg';
  const errDiv = document.createElement('div');
  errDiv.className = 'errtext';
  errDiv.id = errId;
  errDiv.textContent = message;

  field.parentNode.appendChild(errDiv);
  field.setAttribute('aria-describedby', errId);
  field.setAttribute('aria-invalid', 'true');
  field.classList.add('error');
}

Working example: Identifying errors in data format.