Element: ariaDescribedByElements-Eigenschaft

Wert

Ein Array von Unterklassen von HTMLElement. Der innere Text dieser Elemente kann mit Leerzeichen verbunden werden, um die barrierefreie 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.

Beschreibung

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-describedby-Attributs, um die barrierefreie Beschreibung festzulegen. Im Gegensatz zu aria-describedby müssen die Elemente, die dieser Eigenschaft zugewiesen werden, 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 mit gültigen, im Geltungsbereich befindlichen Elementen übereinstimmen. Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht. Für weitere Informationen über reflektierte Elementreferenzen und den Geltungsbereich siehe Reflektierte Elementreferenzen im Reflektierte Attribute-Leitfaden.

Beispiele

Die barrierefreie Beschreibung abrufen

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

HTML

Das HTML definiert zwei <span>-Elemente und verweist in der aria-describedby-Eigenschaft eines <button> darauf.

<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 werden wir einfach die <span>-Elemente, die unseren barrierefreien Text enthalten, ausblenden.

span {
  display: none;
}

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

JavaScript

Der untenstehende 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 dessen Wert protokolliert. Schließlich wird die barrierefreie Zeichenkette zurückgegeben, die durch Iterieren durch die zurückgegebenen Elemente und das Verbinden 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-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 untenstehende Protokoll zeigt die ursprünglichen Elementreferenzen, die zugewiesenen/zurückgegebenen Elemente und die barrierefreie Beschreibung.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-describedby-Attribut
• ElementInternals.ariaDescribedByElements
• Reflektierte Elementreferenzen im Attributreflexion-Leitfaden