Element: ariaDetailsElements property

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

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.

The property is a flexible alternative to using the aria-details attribute to set the accessible details information. Unlike aria-details, the elements assigned to this property do not have to have an id attribute.

The property reflects the element's aria-details 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.

This example shows how ariaDetailsElements can be used to get the information defined using the aria-details attribute in HTML.

HTML

The HTML defines two <span> elements and references their ids in the aria-details attribute of a <button>.

<button aria-details="details1 details2">Button text</button>
…
<span id="details1">Details 1 information about the element.</span>
<span id="details2">Details 2 information about the element.</span>

<pre id="log"></pre>

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

JavaScript

The code below first logs the value of the aria-details attribute from Element.getAttribute() (a string listing the id values of the referenced elements). It then checks whether the ariaDetailsElements is supported, and if so, logs its value. Finally it returns the accessible string, calculated by iterating through the returned elements and concatenating their inner text.

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

const buttonElement = document.querySelector("button");
log(`aria-details: ${buttonElement.getAttribute("aria-details")}`);
// Feature test for ariaDetailsElements
if ("ariaDetailsElements" in Element.prototype) {
  // Get ariaDetailsElements
  const buttonElements = buttonElement.ariaDetailsElements;
  log(`ariaDetailsElements: ${buttonElements}`);

  // Accessible details from ariaDetailsElements
  const text = buttonElements.map((e) => e.textContent.trim()).join(" ");
  log(`Accessible details: ${text.trim()}`);
} else {
  log("element.ariaDetailsElements: not supported by browser");
}

Result

The log below shows the original element references, the associated/returned elements, and the accessible details.

• aria-details attribute
• ElementInternals.ariaDetailsElements
• Reflected element references in the Attribute reflection guide.