Element: ariaErrorMessageElements property

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 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 the aria-errormessage attribute to set the error message for an element. Unlike aria-errormessage, the elements assigned to this property do not have to have an id attribute.

The property reflects the element's aria-errormessage attribute when it is defined, but only for listed reference id 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 see Reflected element references in the Reflected attributes guide.

Examples

Email input with error message

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

HTML

First we define an HTML email input, setting its aria-errormessage attribute to reference an element with the id of err1. 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" id="email" aria-errormessage="err1" />
  <span id="err1" class="errormessage">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 when aria-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 set ariaInvalid to true or false based on the typeMismatch constraint violation. ariaInvalid is in turn reflected in the aria-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 id="log"></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 the aria-errormessage attribute, the ariaErrorMessageElements and the inner text of the ariaErrorMessageElements

log(`aria-errormessage: ${email.getAttribute("aria-errormessage")}`);
// Feature test for ariaErrorMessageElements
if ("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}`);
} 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 from ariaErrorMessageElements, 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 the Attribute reflection guide.