Accessible Inline Form Error Messaging with aria-invalid and aria-errormessage

Visual form errors—such as red borders and exclamation marks—are clear to sighted users. However, without proper ARIA markup, screen reader users who make an input mistake receive no auditory warning that their entry was rejected or why it failed.

Building accessible validation requires setting aria-invalid="true" and tying the input to its corresponding error message with aria-describedby or aria-errormessage.

Example #

<div class="form-field">
  <label for="email-input">Work Email</label>
  <input
    type="email"
    id="email-input"
    name="email"
    required
    aria-invalid="false"
    aria-describedby="email-error"
  />
  <p id="email-error" class="error-msg" hidden>
    Please enter a valid company email address ending in .com or .de
  </p>
</div>

Implementation #

const emailInput = document.getElementById('email-input');
const errorMsg = document.getElementById('email-error');

emailInput.addEventListener('blur', () => {
  if (!emailInput.validity.valid) {
    emailInput.setAttribute('aria-invalid', 'true');
    errorMsg.hidden = false;
  } else {
    emailInput.setAttribute('aria-invalid', 'false');
    errorMsg.hidden = true;
  }
});

Main Point: Pair aria-invalid with aria-describedby to ensure error explanations are announced immediately when an input loses focus.

Credits #

Photo by Simone Hutsch on Unsplash

← Home