JavaScript Element ariaRequired Property

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

Definition

Element.ariaRequired reflects the aria-required attribute: user input is required on the element before a form may be submitted (MDN). Read or write a "true" / "false" string from JavaScript.

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

Syntax

Use el.ariaRequired. Start with this line.

JavaScript
el.ariaRequired / el.ariaRequired = value
CallWhat it does
el.ariaRequired / el.ariaRequired = valuePrimary signature.

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

Library declarations
JavaScript
el.ariaRequired / el.ariaRequired = value

Parameters

ParameterDescription
Form widgetRequired. textbox, checkbox, combobox, listbox, ...
Token stringRequired. "true" or "false"
Validation / visualsRequired. ARIA alone does not enforce or style

Return Value

Return ValueDescription
*The current value of el.ariaRequired.

JavaScript Examples

Example 1 — Read ariaRequired

Log the current required token from a custom textbox.

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

// HTML: role="textbox" aria-required="true" …
Try It Yourself

How It Works

  1. Find the widget. getElementById returns the custom textbox node.
  2. Read the reflection. ariaRequired returns the aria-required string.
  3. Interpret "true". Assistive technologies treat the field as required before submit.
  4. Missing attribute. If there is no aria-required, many browsers return null.

Example 2 — Make Optional (MDN Pattern)

MDN: change from required to optional with the property.

JavaScript
const el = document.getElementById("txtBoxInput");

console.log(el.ariaRequired); // "true"
el.ariaRequired = "false";
console.log(el.ariaRequired); // "false"
console.log(el.getAttribute("aria-required")); // "false"
Try It Yourself

How It Works

  1. Start required. The first log shows "true".
  2. Assign the property. el.ariaRequired = "false" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "false".
  4. In a real UI. Also update the visible required cue and any custom submit checks.

Example 3 — Prefer Native required

When you can use a real input, HTML required is enough (MDN).

JavaScript
const input = document.createElement("input");
input.type = "email";
input.id = "email1";
input.required = true;

console.log(input.required);     // true  (HTML boolean)
console.log(input.ariaRequired); // often null or "false" unless set

// Semantic markup (no ARIA needed):
// <label for="email1">Email Address (required)</label>
// <input type="email" id="email1" required>
Try It Yourself

How It Works

  1. Create a real input. Native controls already expose required semantics.
  2. Set HTML required. The browser can block invalid submit and show messages.
  3. Skip duplicate ARIA. You usually do not also set aria-required on that same control.
  4. Use ariaRequired mainly for custom widgets built without native form semantics.
Compatibility

Browser Support

Element.ariaRequired is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaRequired

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaRequired IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaRequired Excellent

Bottom line: Safe for modern web apps. Prefer native HTML required when possible; use ariaRequired for custom widgets and keep validation in sync.

Frequently Asked Questions

It reflects the aria-required attribute as a string that tells assistive technologies user input is required on the element before a form may be submitted.
No. MDN marks Element.ariaRequired as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "true" (users must provide input before submit) or "false" (input is not necessary). If the attribute is missing, reading the property often returns null.
Yes when possible. MDN recommends an HTML input or textarea with the required attribute, because they have built-in semantics, validation, and do not need ARIA.
No. ARIA only updates the accessibility tree. Unlike HTML required, aria-required does not enforce validation — you must add that behavior with JavaScript (MDN).
If the visible label already includes the word "required", MDN recommends leaving out aria-required so screen readers do not announce "required" twice.

Next: ariaRoleDescription

Learn the reflected aria-roledescription property for custom role names.

ariaRoleDescription 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 ariaRelevant Property JavaScript Element ariaRoleDescription Property