JavaScript Element ariaInvalid Property

What You’ll Learn

Element.ariaInvalid is an instance property that reflects the aria-invalid attribute. Learn the true, false, grammar, and spelling tokens, when assistive tech treats a value as invalid, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Forms and custom widgets often check whether a value matches what the app expects—an email shape, a required choice, or correct spelling. Sighted users may see a red border; assistive technology users need the same signal in the accessibility tree.

aria-invalid carries that signal. ariaInvalid is the JavaScript reflection of that attribute.

const el = document.getElementById("quote");
console.log(el.ariaInvalid); // null when omitted
el.ariaInvalid = "grammar";

Understanding the Property

MDN: the ariaInvalid property of the Element interface reflects the value of the aria-invalid attribute. Relevant for roles such as application, checkbox, combobox, gridcell, listbox, radiogroup, slider, spinbutton, textbox, and tree, it indicates to the accessibility API whether the entered value does not conform to the format expected by the application.

• Reflected attribute — mirrors aria-invalid.
• Get / set — readable and writable string.
• Four tokens — true, false, grammar, spelling.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaInvalid

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with a contenteditable textbox that omits aria-invalid (so the property is null, treated like valid), then sets "grammar" because of errors in the text:

<div id="quote" role="textbox" contenteditable>you are your best thing..</div>

const el = document.getElementById("quote");
console.log(`Initial value: ${el.ariaInvalid}`);
el.ariaInvalid = "grammar";
console.log(`Updated value: ${el.ariaInvalid}`);

Examples Gallery

Examples follow MDN Element: ariaInvalid. Labs use a textbox-style control so you can safely read and write the property.

const el = document.getElementById("quote");
console.log(el.ariaInvalid);

// HTML omits aria-invalid → often null (AT treats as false)

null

const el = document.getElementById("quote");
console.log(`Initial value: ${el.ariaInvalid}`);
el.ariaInvalid = "grammar";
console.log(`Updated value: ${el.ariaInvalid}`);

Initial value: null
Updated value: grammar

const input = document.createElement("input");
input.type = "email";
input.setAttribute("aria-label", "Email");
document.body.appendChild(input);

input.ariaInvalid = "true";
console.log({
  ariaInvalid: input.ariaInvalid,
  attr: input.getAttribute("aria-invalid")
});

{
  "ariaInvalid": "true",
  "attr": "true"
}

const el = document.createElement("div");
el.setAttribute("role", "textbox");
el.setAttribute("contenteditable", "true");
el.textContent = "teh quick brown fox";
document.body.appendChild(el);

el.ariaInvalid = "spelling";
console.log({
  fromProperty: el.ariaInvalid,
  fromAttribute: el.getAttribute("aria-invalid"),
  same: el.ariaInvalid === el.getAttribute("aria-invalid")
});

{
  "fromProperty": "spelling",
  "fromAttribute": "spelling",
  "same": true
}

console.log({
  supported: "ariaInvalid" in Element.prototype,
  allowed: ["true", "false", "grammar", "spelling"],
  tip: "Pair invalid state with ariaErrorMessageElements for why",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false", "grammar", "spelling"],
  "tip": "Pair invalid state with ariaErrorMessageElements for why",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Marking required fields invalid after submit or blur checks.
• Flagging grammar or spelling issues in editable textboxes.
• Syncing custom widget validation with the accessibility tree.
• Clearing invalid state when the user corrects the value.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Missing / empty aria-invalid is treated as valid by AT (MDN).
• Unknown non-empty tokens are treated as true by AT; the property still returns what you set.
• Related: ariaKeyShortcuts, ariaErrorMessageElements, EventTarget, JavaScript hub.

💡 Best Practices