Element: ariaLabelledByElements-Eigenschaft

Wert

Ein Array von Elementen. Der innere Text dieser Elemente kann mit Leerzeichen verbunden werden, um den zugänglichen Namen 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-labelledby-Attributs, um den zugänglichen Namen festzulegen. Anders als aria-labelledby müssen die dieser Eigenschaft zugewiesenen Elemente kein id-Attribut haben.

Zum Beispiel könnte dies verwendet werden, um ein Container-Element, wie ein <div> oder <span>, zu beschriften (vorausgesetzt, es wurde mit einer geeigneten ARIA-Rolle versehen). Die Eigenschaft hat Vorrang vor anderen Mechanismen zur Bereitstellung eines zugänglichen Namens für Elemente und kann daher auch verwendet werden, um einen Namen für Elemente bereitzustellen, die ihn normalerweise aus ihrem inneren Inhalt oder von einem zugehörigen Element wie einem Label erhalten.

Die Eigenschaft spiegelt das aria-labelledby-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgelistete Referenz-id-Werte, die mit gültigen In-Scope-Elementen übereinstimmen. Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht. Weitere Informationen zu gespiegeltetn Elementreferenzen und Bereich finden Sie unter Gespiegelte Elementreferenzen im Gespiegelte Attribute Leitfaden.

Siehe aria-labelledby für zusätzliche Informationen darüber, wie das Attribut und die Eigenschaft verwendet werden sollten.

Beispiele

Den zugänglichen Namen erhalten

Dieses Beispiel zeigt, wie ariaLabelledByElements verwendet werden kann, um ein ARIA-Label zu erhalten, das mit aria-labelledby definiert ist.

HTML

Das HTML definiert zwei <span>-Elemente und referenziert deren IDs im aria-labelledby-Attribut eines <input>. Der zugängliche Name des <input> ist die Verkettung des inneren Texts der beiden referenzierten Elemente, getrennt durch ein Leerzeichen.

<span id="label_1">Street name</span>
<input aria-labelledby="label_1 label_2" />
<span id="label_2">(just the name, no "Street" or "Road" or "Place")</span>

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

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

JavaScript

Der untenstehende Code protokolliert zunächst den Wert des aria-labelledby-Attributs aus Element.getAttribute() (ein String, der die id-Werte der referenzierten Elemente auflistet). Es wird dann geprüft, ob ariaLabelledByElements unterstützt wird, und falls ja, wird dessen Wert protokolliert. Schließlich gibt es die zugängliche Zeichenfolge zurück, die durch Iterieren über die Elemente und Verkettung ihres inneren Textes berechnet wird.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const inputElement = document.querySelector("input");
log(`aria-labelledby: ${inputElement.getAttribute("aria-labelledby")}`);
// Feature test for ariaLabelledByElements
if ("ariaLabelledByElements" in Element.prototype) {
  // Get ariaLabelledByElements
  const labelElements = inputElement.ariaLabelledByElements;
  log(`ariaLabelledByElements: ${labelElements}`);

  // Log inner text of elements to get accessible name
  const text = labelElements.map((e) => e.textContent.trim()).join(" ");
  log(`Accessible name: ${text.trim()}`);
} else {
  log("element.ariaLabelledByElements: not supported by browser");
}

Ergebnis

Das untenstehende Protokoll zeigt die ursprünglichen Elementreferenzen, die zugehörigen/zurückgegebenen Elemente und den zugänglichen Namen. Beachten Sie, dass das Beispiel nichts mit dem im Straßenname <input> eingegebenen Text macht.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-labelledby Attribut
• ElementInternals.ariaLabelledByElements
• Gespiegelte Elementreferenzen im Attributspiegelung Leitfaden.