Element: ariaLabelledByElements-Eigenschaft

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.

Die Eigenschaft ist eine flexible Alternative zur Nutzung des aria-labelledby-Attributs, um den zugänglichen Namen festzulegen. Im Gegensatz zu aria-labelledby müssen die dieser Eigenschaft zugewiesenen Elemente kein id-Attribut haben.

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 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 siehe Reflected element references im Reflected attributes-Leitfaden.

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 Textes 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 gibt zunächst den Wert des aria-labelledby-Attributs aus Element.getAttribute() aus (ein String, der die id-Werte der referenzierten Elemente auflistet). Anschließend wird überprüft, ob ariaLabelledByElements 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 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 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.

• aria-labelledby-Attribut
• ElementInternals.ariaLabelledByElements
• Reflected element references im Attributreflexion-Leitfaden.