aria-invalid — Indicating Input Validation Errors

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-invalid indicates that a form field has failed validation, helping screen reader users identify which fields have errors and the type of validation error detected.

In this tutorial, you'll learn how to use aria-invalid effectively in your ARIA form validation implementations.

What You'll Learn

By the end of this lesson, you'll understand when to set aria-invalid, how to combine it with aria-describedby for error messages, the grammar and spelling values, and how to clear the state.

Why It Matters

Without aria-invalid, screen reader users cannot identify which fields have errors. They must navigate through the entire form to find problems.

Real-World Use

Durga Antivirus Pro's license activation form uses aria-invalid on fields with validation errors, linking each to an error message with aria-describedby.

Validation Flow

flowchart TD
  A[Form submitted] --> B[Validate fields]
  B --> C{Field valid?}
  C -->|Yes| D[Remove aria-invalid or set 'false']
  C -->|No, has error| E[Set aria-invalid='true']
  C -->|No, has grammar error| F[Set aria-invalid='grammar']
  C -->|No, has spelling error| G[Set aria-invalid='spelling']
  E --> H[Link error message with aria-describedby]
  F --> H
  G --> H
  H --> I[Focus first invalid field]

How aria-invalid Works

When a field fails validation, set aria-invalid="true". Screen readers announce the field as invalid:

<label for="email">Email address</label>
<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<p id="email-error" role="alert">Please enter a valid email address.</p>

The screen reader announces: "Email address, invalid, edit text. Please enter a valid email address."

Validation Values

<!-- Grammar error -->
<input type="text" aria-invalid="grammar" aria-describedby="grammar-error" />

<!-- Spelling error -->
<input type="text" aria-invalid="spelling" aria-describedby="spell-error" />

Clearing Invalid State

When the user corrects the field, remove or update the attribute:

function validateField(input) {
  if (input.validity.valid) {
    input.removeAttribute('aria-invalid');
    const errorId = input.getAttribute('aria-describedby');
    if (errorId) {
      document.getElementById(errorId).textContent = '';
    }
  } else {
    input.setAttribute('aria-invalid', 'true');
    input.setAttribute('aria-describedby', input.id + '-error');
    showError(input, input.validationMessage);
  }
}

input.addEventListener('input', () => validateField(input));

Combining With Visual Indicators

Always pair aria-invalid with a visible error indicator:

<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-error"
  class="input-error"
/>
<p id="email-error" class="error-message" role="alert">
  Please enter a valid email address.
</p>

.input-error {
  border-color: #c00;
  outline: 2px solid #c00;
}

Common Mistakes

• Setting aria-invalid on form submission only: Inline validation as the user types is better.
• Not clearing aria-invalid when the field is corrected: The field remains marked as invalid.
• Omitting the error message with aria-describedby: The invalid state alone does not explain the problem.
• Using aria-invalid without a visible indicator: Sighted users also need to see errors.
• Setting aria-invalid on the form element: It goes on the individual form control.

Practice and Challenge

1. What does aria-invalid="true" indicate? The form field has failed validation.

2. What ARIA attribute should pair with aria-invalid to provide error details? aria-describedby linking to the error message.

3. What is the default value of aria-invalid? false.

4. When would you use aria-invalid="spelling"? When a spell checker has identified a misspelled word.

5. Challenge: Create a form that validates email and password fields in real time. Use aria-invalid and aria-describedby for error messages. Clear the states when fields become valid.

FAQ

Mini Project

Build a complete form validation system for a contact form with name, email, and message fields. Use aria-invalid and aria-describedby. Include real-time validation and a form-level error summary with focus management.

What's Next

This completes the ARIA Basics series. Continue to ARIA Guide for advanced ARIA roles and patterns.