ElementInternals: ariaLabelledByElements-Eigenschaft

Ein Array von Elementen. Der innere Text dieser Elemente kann durch 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 Verwendung 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 in-Scope-Elementen übereinstimmen. Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht. Für weitere Informationen zu reflektierten Elementreferenzen und Scope siehe Reflected element references im Reflected attributes-Leitfaden.

Dieses Beispiel zeigt, wie ariaLabelledByElements verwendet werden kann, um programmgesteuert ein Label zu erhalten, das mit aria-labelledby innerhalb des Shadow-Roots definiert wurde.

HTML

Das HTML definiert zwei <span>-Elemente und verweist auf deren IDs im aria-labelledby-Attribut eines <input>. Der zugängliche Name des <input> ist daher die Verkettung des inneren Textes der beiden referenzierten Elemente.

<div id="host">
  <template shadowrootmode="open">
    <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>
  </template>
</div>

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

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

JavaScript

Der Code unten prüft zuerst, ob ariaLabelledByElements unterstützt wird, und wenn nicht, wird das Ergebnis protokolliert und der Vorgang beendet. Wenn die Eigenschaft unterstützt wird, wird zunächst der Wert der Eigenschaft protokolliert. Dann iteriert er durch die zurückgegebenen Elemente, verkettet deren inneren Text und protokolliert den resultierenden zugänglichen Namen des Elements.

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

// Get access to the input within shadowRoot
const hostElement = document.getElementById("host");
const shadowRoot = hostElement.shadowRoot;
const inputElement = shadowRoot.querySelector("input");

// Feature test for ariaLabelledByElements
if ("ariaLabelledByElements" in ElementInternals.prototype) {
  // Get and log attribute that provides the accessible name
  log(`aria-labelledby: ${inputElement.getAttribute("aria-labelledby")}`);

  // Get and log elements that provide the accessible name
  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("ariaLabelledByElements not supported by browser");
}

Ergebnis

Das unten stehende Protokoll zeigt die Ausgabe des obigen Codes. Es zeigt das Array der referenzierten HTMLSpanElement-Elemente und den resultierenden zugänglichen Namen aus ihrem inneren Text.

• aria-labelledby-Attribut
• Element.ariaLabelledByElements
• Reflected element references im Attribute reflection-Leitfaden.