Element: ariaFlowToElements 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.

DieariaFlowToElements-Eigenschaft desElement-Interfaces ist ein Array, das das Element oder die Elemente enthält, die eine alternative Lesereihenfolge des Inhalts bereitstellen und die allgemeine Standardlesereihenfolge nach Ermessen des Benutzers überschreiben. Wenn nur ein Element angegeben wird, ist dies das nächste Element in der Lesereihenfolge. Wenn mehrere Elemente angegeben werden, dann stellt jedes Element einen möglichen Pfad dar, der dem Benutzer zur Auswahl angeboten werden soll.

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

Wert

Ein Array von Unterklassen vonHTMLElement.

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 desaria-flowto-Attributs, um eine alternative Lesereihenfolge festzulegen. Im Gegensatz zuaria-flowto müssen die der Eigenschaft zugewiesenen Elemente keinid-Attribut haben.

Die Eigenschaft spiegelt dasaria-flowto-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgelistete Referenz-id-Werte, die mit gültigen, im Gültigkeitsbereich befindlichen Elementen übereinstimmen. Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht. Weitere Informationen zu reflektierten Elementreferenzen und dem Gültigkeitsbereich finden Sie unterReflektierte Elementreferenzen imAttributreflektion Leitfaden.

Beispiele

Das Flow-to-Element abrufen

Dieses Beispiel demonstriert den normalen Fluss durch drei Elementesection1,section2,section3 in Reihenfolge und eine alternative Reihenfolge, die vonsection1 zusection3 und zurück springt. Beachten Sie, dass das Beispiel veranschaulichend ist, es sei denn, Sie haben Barrierefreiheitstools laufen: Wir folgen diesem alternativen Pfad tatsächlich nicht.

HTML

Das HTML definiert drei<div>-Elemente, die Abschnitte definieren, mit einer Klasse"section" undid-Werten:section1,section2 undsection3. Jeder Abschnitt hat einen normalen Fluss, der durch seine Reihenfolge definiert ist, beginnend beisection1 und endend beisection3. Ein alternativer Fluss ist in den Abschnitten 1 und 3 unter Verwendung desaria-flowto Attributs definiert.

<pre></pre>

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

html

<div aria-flowto="section3">  <h2>Section 1</h2>  <p>First section in normal flow. Section 3 is alternate flow.</p>  <a href="#section2">Jump to Section 2 (normal flow)</a></div><div>  <h2>Section 2</h2>  <p>Second section in normal flow.</p>  <a href="#section3">Jump to Section 3 (normal flow)</a></div><div aria-flowto="section1">  <h2>Section 3</h2>  <p>    Third section in normal flow (end of flow). Section 1 is alternate flow.  </p></div>

JavaScript

Der Code prüft zuerst, obariaFlowToElements unterstützt wird und protokolliert, falls ja, dessen Wert. Anschließend wird durch die Abschnitte iteriert und die Abschnitts-id, der Wert desaria-flowto-Attributs und der Wert derariaFlowToElements-Eigenschaft protokolliert.

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

// Feature test for ariaFlowToElementsif ("ariaFlowToElements" in Element.prototype) {  const sections = document.querySelectorAll(".section");  sections.forEach((sectionDivElement) => {    log(`${sectionDivElement.id}`);    log(` aria-flowto: ${sectionDivElement.getAttribute("aria-flowto")}`);    log(" ariaFlowToElements:");    // Get the ids of each of the elements in the array    sectionDivElement.ariaFlowToElements?.forEach((elem) => {      log(`  id: ${elem.id}`);    });  });} else {  log("element.ariaFlowToElements: not supported by browser");}

Ergebnis

Das nachfolgende Protokoll zeigt jeden der Abschnitte (identifiziert durchid) und die entsprechenden Flow-to-Element-IDs, die ggf. von Barrierefreiheitstools ausgewählt werden könnten. Wir stellen hier fest, dass das Attribut und die Eigenschaft dieselben Flow-to-Elemente identifizieren.