Element: ariaDetailsElements-Eigenschaft

Ein Array von Unterklassen von HTMLElement. Der innere Text dieser Elemente kann mit Leerzeichen verbunden werden, um die zugänglichen Details zu erhalten.

Beim Lesen ist das zurückgegebene Array statisch und schreibgeschützt. Beim Schreiben wird das zugewiesene Array kopiert: Nachträgliche Änderungen am Array beeinflussen den Wert der Eigenschaft nicht.

Die Eigenschaft ist eine flexible Alternative zur Nutzung des aria-details-Attributs, um die zugänglichen Detailinformationen festzulegen. Im Gegensatz zu aria-details müssen die dieser Eigenschaft zugewiesenen Elemente kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-details-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgelistete Referenz-id-Werte, die mit gültigen Elementen im Geltungsbereich übereinstimmen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut gelöscht. Weitere Informationen über reflektierte Elementreferenzen und deren Geltungsbereich finden Sie unter Reflektierte Elementreferenzen im Reflektierte Attribute-Leitfaden.

Dieses Beispiel zeigt, wie ariaDetailsElements verwendet werden kann, um die mit dem aria-details-Attribut im HTML definierten Informationen abzurufen.

HTML

Das HTML definiert zwei <span>-Elemente und verweist auf deren IDs im aria-details-Attribut eines <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

Der unten stehende Code protokolliert zunächst den Wert des aria-details-Attributs von Element.getAttribute() (ein String, der die id-Werte der referenzierten Elemente auflistet). Anschließend wird überprüft, ob ariaDetailsElements unterstützt wird, und falls ja, wird deren Wert protokolliert. Schließlich wird der zugängliche String zurückgegeben, der durch Iterieren über die zurückgegebenen Elemente und Konkatenation ihres inneren Textes berechnet wird.

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");
}

Ergebnis

Das unten stehende Protokoll zeigt die ursprünglichen Elementreferenzen, die zugeordneten/zurückgegebenen Elemente und die zugänglichen Details.

• aria-details-Attribut
• ElementInternals.ariaDetailsElements
• Reflektierte Elementreferenzen im Attributreflexion-Leitfaden.