JavaScript Element ariaErrorMessageElements Property

What You’ll Learn

Element.ariaErrorMessageElements is an instance property that holds an array of elements providing an error message. Learn how it relates to aria-errormessage, how to pair it with ariaInvalid, and how to get or set the relationship from JavaScript—with five examples and try-it labs.

Introduction

Form fields need a clear place for error text: “Enter a valid email address,” “Password is required,” and so on. ARIA links a control to that message with aria-errormessage.

ariaErrorMessageElements is the modern element-reference form: you work with real DOM nodes instead of only managing id strings. Pair it with ariaInvalid so the error is announced and styled when the field is invalid.

const msgs = email.ariaErrorMessageElements;
const text = msgs.map((e) => e.textContent.trim()).join(" ");
console.log(text);

Understanding the Property

MDN: the ariaErrorMessageElements property of the Element interface is an array containing the element (or elements) that provide an error message for the element it is applied to.

• Get / set — read or assign an array of elements.
• Flexible alternative to the aria-errormessage attribute.
• No id required on message nodes when you set the property (MDN).
• Reflection — reads valid in-scope id refs from the attribute; setting the property clears the attribute.

📝 Syntax

ariaErrorMessageElements

Value

An array of subclasses of HTMLElement. The inner text of these elements can be joined with spaces to get the error message.

• When read, the returned array is static and read-only.
• When written, the assigned array is copied—later edits to that array do not change the property.

⚖️ Property vs aria-errormessage Attribute

📋 Email Input With Error (MDN Shape)

MDN links an email field to an error span via aria-errormessage, then toggles ariaInvalid from Constraint Validation:

<p>
  <label for="email">Email address:</label>
  <input type="email" name="email" id="email" aria-errormessage="err1" />
  <span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>

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

email.addEventListener("input", () => {
  email.ariaInvalid = email.validity.typeMismatch ? "true" : "false";
});

Related: hide the message by default and show it when [aria-invalid="true"] is present (as in MDN’s CSS).

Examples Gallery

Examples follow MDN Element: ariaErrorMessageElements. Labs feature-detect first so older browsers still show a clear message.

if ("ariaErrorMessageElements" in Element.prototype) {
  console.log("ariaErrorMessageElements is supported");
} else {
  console.log("ariaErrorMessageElements not supported by browser");
}

ariaErrorMessageElements is supported

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

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

if ("ariaErrorMessageElements" in Element.prototype) {
  const propElements = email.ariaErrorMessageElements;
  console.log("count:", propElements.length);
  const text = propElements.map((e) => e.textContent.trim()).join(" ");
  console.log("Error message details:", text);
} else {
  console.log("ariaErrorMessageElements not supported by browser");
}

aria-errormessage: err1
count: 1
Error message details: Error: Enter a valid email address

const input = document.createElement("input");
const err = document.createElement("span");
input.type = "email";
err.textContent = "Error: Enter a valid email address";
document.body.append(input, err);

if ("ariaErrorMessageElements" in Element.prototype) {
  input.ariaErrorMessageElements = [err];
  console.log({
    count: input.ariaErrorMessageElements.length,
    attrAfterSet: input.getAttribute("aria-errormessage"),
    text: input.ariaErrorMessageElements.map((e) => e.textContent).join(" ")
  });
} else {
  console.log("ariaErrorMessageElements not supported by browser");
}

{
  "count": 1,
  "attrAfterSet": null,
  "text": "Error: Enter a valid email address"
}

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

console.log({
  fromAttribute: email.getAttribute("aria-errormessage"),
  supported: "ariaErrorMessageElements" in Element.prototype,
  fromProperty: "ariaErrorMessageElements" in Element.prototype
    ? email.ariaErrorMessageElements.map((el) => el.id)
    : null
});

{
  "fromAttribute": "err1",
  "supported": true,
  "fromProperty": ["err1"]
}

console.log({
  supported: "ariaErrorMessageElements" in Element.prototype,
  tip: "Returned array is static/read-only; assigned arrays are copied",
  pairsWith: "ariaInvalid true/false when validation fails",
  status: "Baseline Newly available (MDN, Apr 2025)"
});

{
  "supported": true,
  "tip": "Returned array is static/read-only; assigned arrays are copied",
  "pairsWith": "ariaInvalid true/false when validation fails",
  "status": "Baseline Newly available (MDN, Apr 2025)"
}

🚀 Common Use Cases

• Email, password, and other inputs with dedicated error message elements.
• Custom form controls that need ARIA error association.
• Dynamic UIs that attach error nodes without assigning ids.
• Showing/hiding errors with CSS based on aria-invalid.
• Custom elements via ElementInternals.ariaErrorMessageElements.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Newly available, Apr 2025).
• Feature-detect on older browsers.
• Returned arrays are static; assigned arrays are copied.
• Related: ariaExpanded, ariaDisabled, EventTarget, JavaScript hub.

💡 Best Practices