JavaScript Element ariaInvalid Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAINVALID

Definition

Element.ariaInvalid reflects the aria-invalid attribute: whether the entered value does not conform to the format expected by the application (MDN). Useful on textbox, combobox, checkbox, and similar roles.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaInvalid. Start with this line.

JavaScript
el.ariaInvalid;
CallWhat it does
el.ariaInvalid;Primary signature.

Built into the browser. Read or assign el.ariaInvalid — no import required.

Library declarations
JavaScript
el.ariaInvalid;

Parameters

ParameterDescription
PropertyRequired. el.ariaInvalid
ValuesRequired. "true" / "false" / "grammar" / "spelling"

Return Value

Return ValueDescription
*The current value of el.ariaInvalid.

JavaScript Examples

Example 1 — Set "grammar" (MDN)

Read the initial value (often null), then mark a grammar error.

JavaScript
const el = document.getElementById("quote");
console.log(el.ariaInvalid); // null (attribute omitted)
el.ariaInvalid = "grammar";
console.log(el.ariaInvalid); // "grammar"
Try It Yourself

How It Works

  1. Select the textbox. MDN uses a contenteditable with role="textbox".
  2. Read ariaInvalid. Missing attribute often returns null.
  3. Assign "grammar". Specific invalid kind (MDN).
  4. Remember: AT treats missing / empty as valid (false).

Example 2 — Toggle Invalid on Email Input

Use constraint validation and show/hide the error message.

JavaScript
const email = document.getElementById("email");
const err = document.getElementById("err1");

email.addEventListener("input", () => {
  const bad = email.value !== "" && email.validity.typeMismatch;
  email.ariaInvalid = bad ? "true" : "false";
  err.hidden = !bad;
});
Try It Yourself

How It Works

  1. Listen for input. Re-check on every change.
  2. Use validity.typeMismatch for email format.
  3. Set ariaInvalid to "true" or "false".
  4. Toggle hidden on the message so sighted users see it too.

Example 3 — Mark a Spelling Error

Use the specific "spelling" token when that is the failure kind.

JavaScript
const el = document.getElementById("notes");
el.ariaInvalid = "spelling";
console.log(el.ariaInvalid); // "spelling"
console.log(el.getAttribute("aria-invalid")); // "spelling"
Try It Yourself

How It Works

  1. Pick the control with a spelling problem.
  2. Assign "spelling". More specific than bare "true".
  3. Reflects to aria-invalid. Property and attribute stay in sync.
  4. Clear with "false" (or remove the attribute) when fixed.
Compatibility

Browser Support

Element.ariaInvalid is Baseline Widely available (MDN: since October 2023). Safe for modern evergreen browsers.

✓ Baseline · Widely available

ariaInvalid

Reflects aria-invalid for form and widget validation state.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaInvalid Excellent

Bottom line: Use listed tokens. Pair with an error message. Clear to false when the value is valid.

Frequently Asked Questions

It reflects the aria-invalid attribute as a string, telling the accessibility API whether the entered value does not conform to the format expected by the application (MDN).
No. MDN marks Element.ariaInvalid as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "true", "false" (default), "grammar", or "spelling" (MDN). Prefer grammar or spelling when those are the specific error kinds.
If aria-invalid is not present or is set to the empty string, assistive technology treats the value as false. The property itself often returns null when the attribute is omitted (MDN).
When a field is invalid, point to helpful error text with aria-errormessage / ariaErrorMessageElements so users hear why it failed.
Yes. Custom elements can use ElementInternals.ariaInvalid for the same reflected value from inside a component (MDN).

Next: ariaKeyShortcuts

Learn the Element property that exposes keyboard shortcuts to assistive tech.

ariaKeyShortcuts tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaHidden Property JavaScript Element ariaKeyShortcuts Property