TheariaErrorMessageElements property of theElement interface is an array containing the element (or elements) that provide an error message for the element it is applied to.

Thearia-errormessage topic contains additional information about how the attribute and property should be used.

Value

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

When read, the returned array is a static and read-only.When written, the assigned array is copied: subsequent changes to the array do not affect the value of the property.

Description

The property is a flexible alternative to using thearia-errormessage attribute to set the error message for an element.Unlikearia-errormessage, the elements assigned to this property do not have to have anid attribute.

The property reflects the element'saria-errormessage attribute when it is defined, but only for listed referenceid values that match valid in-scope elements.If the property is set, then the corresponding attribute is cleared.For more information about reflected element references and scope seeReflected element references in theReflected attributes guide.

Examples

Email input with error message

This example shows how we use thearia-errormessage to set the error message for reporting entry of an invalid email address, and demonstrates how we can get and set the message usingariaErrorMessageElements.

HTML

First we define an HTML email input, setting itsaria-errormessage attribute to reference an element with theid oferr1.We then define a<span> element that has this id, and which contains an error message.

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

CSS

We create some styles to hide the error message by default, but make it visible and styled as an error whenaria-invalid is set on the element.

.errormessage {  visibility: hidden;}[aria-invalid="true"] {  outline: 2px solid red;}[aria-invalid="true"] ~ .errormessage {  visibility: visible;}

JavaScript

We then check for input, and setariaInvalid totrue orfalse based on thetypeMismatch constraint violation.ariaInvalid is in turn reflected in thearia-invalid attribute, which hides and displays the error as needed.

const email = document.querySelector("#email");email.addEventListener("input", (event) => {  if (email.validity.typeMismatch) {    email.ariaInvalid = true;  } else {    email.ariaInvalid = false;  }});

<pre></pre>

#log {  height: 70px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

We then log the value of thearia-errormessage attribute, theariaErrorMessageElements and the inner text of theariaErrorMessageElements

log(`aria-errormessage: ${email.getAttribute("aria-errormessage")}`);// Feature test for ariaErrorMessageElementsif ("ariaErrorMessageElements" in Element.prototype) {  // Get ariaErrorMessageElements  const propElements = email.ariaErrorMessageElements;  log(`ariaErrorMessageElements: ${propElements}`);  // Accessible text from element inner text  const text = propElements.map((e) => e.textContent.trim).join(" ");  log(`Error message details: ${text.trim()}`);} else {  log("element.ariaErrorMessageElements: not supported by browser");}

Result

As you enter an email address, the error text will be displayed until the email address is valid.Note that the log shows the error message reference read from the attribute, the element fromariaErrorMessageElements, and the inner text of the element, which is its error message.

Specifications

Browser compatibility

See also

• aria-errormessage attribute
• ElementInternals.ariaErrorMessageElements
• Reflected element references in theAttribute reflection guide.