JavaScript Element ariaRequired Property

What You’ll Learn

Element.ariaRequired is an instance property that reflects the aria-required attribute. Learn the true and false tokens, when to prefer native required, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Some form fields are optional. Others must be filled before submit—email, password, or article tags. Assistive technologies need a clear required signal, not only a red asterisk on the screen.

aria-required carries that signal. ariaRequired is the JavaScript reflection of that attribute.

const el = document.getElementById("txtBoxInput");
console.log(el.ariaRequired); // "true"
el.ariaRequired = "false";

Understanding the Property

MDN: the ariaRequired property of the Element interface reflects the value of the aria-required attribute, which indicates that user input is required on the element before a form may be submitted.

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

📝 Syntax

ariaRequired

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with a contenteditable textbox marked aria-required="true", then updates it to "false":

<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div
  role="textbox"
  id="txtBoxInput"
  contenteditable="true"
  aria-multiline="true"
  aria-labelledby="txtboxMultilineLabel"
  aria-required="true"
></div>

let el = document.getElementById("txtBoxInput");
console.log(el.ariaRequired); // "true"
el.ariaRequired = "false";
console.log(el.ariaRequired); // "false"

When the field is required, also show a visible cue (for example “required” or an asterisk explained in text) and validate before submit.

Examples Gallery

Examples follow MDN Element: ariaRequired. Labs use a custom textbox so you can safely read and write the property.

const el = document.getElementById("txtBoxInput");
console.log(el.ariaRequired);

// HTML includes: role="textbox" aria-required="true"

true

let el = document.getElementById("txtBoxInput");
console.log(el.ariaRequired); // "true"
el.ariaRequired = "false";
console.log(el.ariaRequired); // "false"

true
false

const box = document.createElement("div");
box.setAttribute("role", "textbox");
box.setAttribute("contenteditable", "true");
box.setAttribute("aria-label", "Article tags");
document.body.appendChild(box);

box.ariaRequired = "true";
console.log({
  ariaRequired: box.ariaRequired,
  attr: box.getAttribute("aria-required")
});

{
  "ariaRequired": "true",
  "attr": "true"
}

const el = document.createElement("div");
el.setAttribute("role", "textbox");
el.setAttribute("contenteditable", "true");
el.setAttribute("aria-required", "true");
el.setAttribute("aria-label", "Tags");
document.body.appendChild(el);

el.ariaRequired = "false";
console.log({
  fromProperty: el.ariaRequired,
  fromAttribute: el.getAttribute("aria-required"),
  same: el.ariaRequired === el.getAttribute("aria-required")
});

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

console.log({
  supported: "ariaRequired" in Element.prototype,
  allowed: ["true", "false"],
  tip: "Prefer input/textarea required when possible (MDN)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false"],
  "tip": "Prefer input/textarea required when possible (MDN)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom textboxes that must be filled before submit.
• Dynamic forms that toggle required vs optional fields.
• Design-system inputs that cannot use native required.
• Multi-step wizards that mark step fields as required.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer native required on <input> / <textarea> when possible (MDN).
• Keep labels, asterisks, and validation aligned with the true / false value.
• Related: ariaRelevant, ariaReadOnly, ariaRoleDescription, JavaScript hub.

💡 Best Practices