Element: ariaLabelledByElements-Eigenschaft

Baseline 2025

Newly available

Since April 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

DieariaLabelledByElements-Eigenschaft desElement-Interfaces ist ein Array, das das oder die Elemente enthält, die einen zugänglichen Namen für das Element bereitstellen, auf das es angewendet wird.

Die Eigenschaft ist hauptsächlich dazu gedacht, ein Label für Elemente bereitzustellen, die keine Standardmethode zur Definition ihres zugänglichen Namens haben. Beispielsweise könnte dies verwendet werden, um ein allgemeines Container-Element, wie ein<div> oder<span>, oder eine Gruppierung von Elementen, wie ein Bild mit einem Schieberegler, der zur Änderung seiner Transparenz verwendet werden kann, zu benennen. Die Eigenschaft hat Vorrang vor anderen Mechanismen zur Bereitstellung eines zugänglichen Namens für Elemente und kann daher auch verwendet werden, um einem Element einen Namen zu geben, das diesen normalerweise aus seinem inneren Inhalt oder von einem assoziierten Element wie einem Label erhalten würde.

Das Themaaria-labelledby enthält zusätzliche Informationen darüber, wie das Attribut und die Eigenschaft verwendet werden sollten.

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 Nutzung desaria-labelledby-Attributs, um den zugänglichen Namen festzulegen. Im Gegensatz zuaria-labelledby müssen die dieser Eigenschaft zugewiesenen Elemente keinid-Attribut haben.

Die Eigenschaft spiegelt dasaria-labelledby-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. Für weitere Informationen über reflektierte Elementreferenzen und deren Geltungsbereich sieheReflected element references imReflected attributes-Leitfaden.

Beispiele

Den zugänglichen Namen abrufen

Dieses Beispiel zeigt, wieariaLabelledByElements verwendet werden kann, um ein ARIA-Label zu erhalten, das mitaria-labelledby definiert ist.

HTML

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

html

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

<pre></pre>

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

JavaScript

Der untenstehende Code gibt zunächst den Wert desaria-labelledby-Attributs ausElement.getAttribute() aus (ein String, der dieid-Werte der referenzierten Elemente auflistet). Anschließend wird überprüft, obariaLabelledByElements unterstützt wird, und falls ja, wird dessen Wert ausgegeben. Schließlich wird der zugängliche String zurückgegeben, der durch Iteration ü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 ariaLabelledByElementsif ("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 folgende Log zeigt die ursprünglichen Elementreferenzen, die zugeordneten/zurückgegebenen Elemente und den zugänglichen Namen. Beachten Sie, dass das Beispiel nichts mit dem im Straßennamen-<input> eingegebenen Text macht.