Element: ariaDetailsElements Eigenschaft

Wert

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: Nachfolgende Änderungen am Array beeinflussen den Wert der Eigenschaft nicht.

Beschreibung

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-details Attributs, um die zugänglichen Detailinformationen festzulegen. Im Gegensatz zu aria-details müssen die zu 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 zu gültigen, im Bereich befindlichen Elementen passen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut gelöscht. Weitere Informationen zu reflektierten Elementreferenzen und Bereich finden Sie unter Reflektierte Elementreferenzen im Reflektierte Attribute Leitfaden.

Beispiele

Die zugänglichen Details erhalten

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

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 untenstehende Code protokolliert zuerst den Wert des aria-details Attributs von Element.getAttribute() (eine Zeichenfolge, die die id-Werte der referenzierten Elemente auflistet). Er überprüft dann, ob ariaDetailsElements unterstützt wird, und wenn ja, protokolliert er dessen Wert. Schließlich gibt er die zugängliche Zeichenfolge zurück, die durch Durchlaufen der zurückgegebenen Elemente und das Konkatenieren 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 Protokoll unten zeigt die ursprünglichen Elementreferenzen, die zugeordneten/zurückgegebenen Elemente und die zugänglichen Details.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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