JavaScript Element ariaErrorMessageElements Property

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

Definition

Element.ariaErrorMessageElements is an array of elements that provide an error message for the element it is applied to (MDN). It is the element-reference form of aria-errormessage.

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

Syntax

Use el.ariaErrorMessageElements. Start with this line.

JavaScript
const nodes = email.ariaErrorMessageElements;
CallWhat it does
const nodes = email.ariaErrorMessageElements;Primary signature.

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

Library declarations
JavaScript
const nodes = email.ariaErrorMessageElements;

Parameters

ParameterDescription
PropertyRequired. el.ariaErrorMessageElements
AttributeOptional. aria-errormessage id list

Return Value

Return ValueDescription
*The current value of el.ariaErrorMessageElements.

JavaScript Examples

Example 1 — Read from aria-errormessage (MDN)

Resolve the attribute into elements, then join their text.

JavaScript
const email = document.querySelector("#email");

console.log(
  "aria-errormessage:",
  email.getAttribute("aria-errormessage")
);

if ("ariaErrorMessageElements" in Element.prototype) {
  const nodes = email.ariaErrorMessageElements;
  const text = nodes.map((el) => el.textContent.trim()).join(" ");
  console.log("Error message:", text);
} else {
  console.log("ariaErrorMessageElements not supported");
}
Try It Yourself

How It Works

  1. Read the attribute with getAttribute("aria-errormessage").
  2. Feature-detect the property. Baseline Newly available since Apr 2025.
  3. Read ariaErrorMessageElements. Valid ids become element nodes.
  4. Join textContent. MDN’s way to log the error string.

Example 2 — Toggle ariaInvalid on Input (MDN)

Keep the error link; flip invalid state from constraint validation.

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

email.addEventListener("input", () => {
  const bad = email.validity.typeMismatch;
  email.ariaInvalid = bad;
  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 (MDN).
  3. Set ariaInvalid. Tells assistive tech the field is invalid.
  4. Toggle hidden on the message so sighted users see it too (CSS-free).

Example 3 — Set Error Elements Without ids

Assign element references; the attribute is cleared (MDN).

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

if ("ariaErrorMessageElements" in Element.prototype) {
  email.ariaErrorMessageElements = [err];
  console.log("count:", email.ariaErrorMessageElements.length);
  console.log("attr:", email.getAttribute("aria-errormessage")); // null
} else {
  console.log("ariaErrorMessageElements not supported");
}
Try It Yourself

How It Works

  1. Hold a real DOM node for the error text.
  2. Assign an array. No id required when setting the property (MDN).
  3. Expect a cleared attribute. Setting the property clears aria-errormessage.
  4. Still set ariaInvalid when you want the error announced/shown.
Compatibility

Browser Support

Element.ariaErrorMessageElements is Baseline Newly available (MDN: across latest browsers since April 2025). Feature-detect on older engines and keep an aria-errormessage id fallback if needed.

✓ Baseline 2025 · Newly available

ariaErrorMessageElements

Element-reference form of aria-errormessage for form validation errors.

2025 Newly 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
ariaErrorMessageElements Latest browsers

Bottom line: Prefer the property when supported. Pair with ariaInvalid. Setting the property clears the attribute.

Frequently Asked Questions

An array of HTMLElement subclasses that provide an error message for the element. You can join their text with spaces to form the error message string (MDN).
No. MDN marks Element.ariaErrorMessageElements as Baseline 2025 Newly available (since April 2025). It is not Deprecated, Experimental, or Non-standard. Feature-detect on older browsers.
The attribute uses space-separated id strings. The property uses Element references. Assigned elements do not need an id. Setting the property clears the corresponding attribute (MDN).
Point to the error message with ariaErrorMessageElements (or aria-errormessage), then set ariaInvalid to true when the field is invalid so assistive technologies know the control is invalid (MDN pattern).
No. When read, the returned array is static and read-only. When written, the assigned array is copied — later changes to that array do not update the property (MDN).
Yes. Custom elements can use ElementInternals.ariaErrorMessageElements for the same relationship from inside a component (MDN).

Next: ariaExpanded

Learn the Element property that reflects expand/collapse state.

ariaExpanded 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 ariaDisabled Property JavaScript Element ariaExpanded Property