TheariaDetailsElements property of theElement interface is an array containing the element (or elements) that provide an accessible details for the element it is applied to.The accessible details are similar to the accessible description (seeariaDescribedByElements), but provides more verbose information.

Thearia-details 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 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.

Description

The property is a flexible alternative to using thearia-details attribute to set the accessible details information.Unlikearia-details, the elements assigned to this property do not have to have anid attribute.

The property reflects the element'saria-details 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

Get the accessible details

This example shows howariaDetailsElements can be used to get the information defined using thearia-details attribute in HTML.

HTML

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

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

<pre></pre>

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

JavaScript

The code below first logs the value of thearia-details attribute fromElement.getAttribute() (a string listing theid values of the referenced elements).It then checks whether theariaDetailsElements 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 ariaDetailsElementsif ("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.

Specifications

Browser compatibility

See also

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