Element: ariaDescribedByElements-Eigenschaft

Ein Array von Subklassen von HTMLElement. Der innere Text dieser Elemente kann mit Leerzeichen verbunden werden, um die zugängliche Beschreibung 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.

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-describedby-Attributs, um die zugängliche Beschreibung festzulegen. Im Gegensatz zu aria-describedby müssen die dieser Eigenschaft zugewiesenen Elemente kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-describedby-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgeführte Referenz-id-Werte, die gültigen In-Scope-Elementen entsprechen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut geleert. Weitere Informationen zu reflektierten Elementreferenzen und dem Scope finden Sie unter Reflected element references im Reflected attributes-Leitfaden.

Dieses Beispiel zeigt, wie ariaDescribedByElements verwendet werden kann, um die mit aria-describedby definierte zugängliche Beschreibung abzurufen.

HTML

Das HTML definiert zwei <span>-Elemente und referenziert deren IDs im aria-describedby-Attribut eines <button>.

<button aria-describedby="trash-desc1 trash-desc2">Move to trash</button>
…
<span id="trash-desc1">Trash will be permanently removed after 30 days.</span>
<span id="trash-desc2">Or Else!</span>

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

CSS

Hier verbergen wir einfach die <span>-Elemente, die unseren zugänglichen Text enthalten.

span {
  display: none;
}

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

JavaScript

Der folgende Code protokolliert zuerst den Wert des aria-describedby-Attributs von Element.getAttribute() (ein String, der die id-Werte der referenzierten Elemente auflistet). Anschließend wird überprüft, ob ariaDescribedByElements unterstützt wird, und falls ja, wird sein Wert protokolliert. Schließlich wird der zugängliche String zurückgegeben, der durch Iterieren über die zurückgegebenen Elemente und Verketten ihrer inneren Texte 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-describedby: ${buttonElement.getAttribute("aria-describedby")}`);
// Feature test for ariaDescribedByElements
if ("ariaDescribedByElements" in Element.prototype) {
  // Get ariaDescribedByElements
  const buttonElements = buttonElement.ariaDescribedByElements;
  log(`ariaDescribedByElements: ${buttonElements}`);

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

Ergebnis

Das folgende Protokoll zeigt die ursprünglichen Elementreferenzen, die zugeordneten/zurückgegebenen Elemente und die zugängliche Beschreibung.

• aria-describedby-Attribut
• ElementInternals.ariaDescribedByElements
• Reflected element references im Attribute reflection-Leitfaden