Element.ariaFlowToElements — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaFlowToElements

Beschreibung

ariaFlowToElements spiegelt das ARIA-Attribut aria-flowto wider. Statt einer durch Leerzeichen getrennten Liste von IDs arbeitest du hier direkt mit Elementreferenzen. Die angegebenen Elemente legen fest, wohin assistive Technologien (zum Beispiel Screenreader) nach dem aktuellen Element springen können. So lässt sich die normale Lesereihenfolge des Dokuments auf Wunsch des Nutzers überspringen.

Das ist nützlich bei nicht-linearen Layouts wie Zeitungsspalten, Diagrammen, Flussdiagrammen oder Formularen, bei denen die visuelle Reihenfolge nicht mit der DOM-Reihenfolge übereinstimmt. Gibst du mehrere Elemente an, kann die assistive Technologie dem Nutzer eine Auswahl anbieten.

Der große Vorteil gegenüber dem Attribut: Die Zielelemente brauchen keine id. Das ist besonders in Web Components praktisch, weil IDs Shadow-DOM-Grenzen nicht überwinden. Ein Element im Shadow DOM darf so auf Elemente im umgebenden Light DOM verweisen, also in einem übergeordneten Baum (shadow-including ancestor).

Beim Lesen erhältst du ein eingefrorenes Array. Enthalten sind nur gültige Referenzen, also Elemente, die sich im selben Baum oder in einem übergeordneten Baum befinden. Ist nichts gesetzt, ist der Wert null. Wenn das Attribut aria-flowto gesetzt ist, ermittelt der Getter die Elemente aus den IDs.

Parameter

Name	Typ	Default	Beschreibung
$value (Setter)	Array<Element> \| null	null	Ein Array mit den Elementen, zu denen der Lesefluss alternativ springen kann. `null` entfernt die Zuordnung und das Attribut `aria-flowto`.

Rückgabewert

Typ

ReadonlyArray<Element> | null

Beschreibung

Ein eingefrorenes Array der referenzierten Elemente oder null, wenn keine Zuordnung besteht. Ungültige Referenzen, etwa Elemente in einem Shadow Root unterhalb des aktuellen Elements, werden herausgefiltert.

Beispiele

Alternative Lesereihenfolge per Elementreferenz setzen

// HTML: <div id="intro">Einleitung</div> ... <aside id="hinweis">Wichtig!</aside>
const intro = document.querySelector('#intro');
const hinweis = document.querySelector('#hinweis');

// Screenreader dürfen nach der Einleitung direkt zum Hinweis springen
intro.ariaFlowToElements = [hinweis];

console.log(intro.ariaFlowToElements.map((el) => el.id));
console.log(intro.getAttribute('aria-flowto'));

["hinweis"] ""

Vorhandenes aria-flowto-Attribut auslesen

// HTML: <p id="start" aria-flowto="spalte2 fussnote">…</p>
//       <div id="spalte2">…</div><div id="fussnote">…</div>
const start = document.getElementById('start');

const ziele = start.ariaFlowToElements ?? [];
for (const el of ziele) {
  console.log(`Fluss zu: #${el.id} (${el.tagName})`);
}

Fluss zu: #spalte2 (DIV) Fluss zu: #fussnote (DIV)

Web Component verweist aus dem Shadow DOM auf Light-DOM-Inhalte

class FlowStep extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Weiter</button>';
    const btn = root.querySelector('button');

    // Ziel liegt im Light DOM – mit IDs wäre das über die Shadow-Grenze hinweg nicht möglich
    const next = document.querySelector(this.getAttribute('next'));
    if (next && 'ariaFlowToElements' in Element.prototype) {
      btn.ariaFlowToElements = [next];
    }
  }
}
customElements.define('flow-step', FlowStep);
// Nutzung: <flow-step next="#schritt-2"></flow-step>

Zuordnung wieder entfernen

const intro = document.querySelector('#intro');
intro.ariaFlowToElements = null;

console.log(intro.ariaFlowToElements);
console.log(intro.hasAttribute('aria-flowto'));

null false

// Wichtig · Fallstricke

Screenreader-Unterstützung: aria-flowto wird von assistiven Technologien kaum unterstützt, im Wesentlichen nur von JAWS. Verlasse dich nicht darauf. Eine sinnvolle DOM-Reihenfolge ist fast immer die bessere Lösung.
Attribut wird nicht synchronisiert: Setzt du Elemente über die Eigenschaft, wird das Attribut aria-flowto auf einen leeren String gesetzt und nicht mit IDs gefüllt. Setzt du später das Attribut, ersetzt das die gespeicherten Elementreferenzen.
Gültigkeit der Referenzen: Elemente in einem Shadow Root unterhalb des Elements sowie Elemente aus fremden Dokumenten gelten nicht als gültig und fehlen im Getter-Ergebnis.
Eingefrorenes Array: Das zurückgegebene Array ist eingefroren. push() und ähnliche Methoden werfen im Strict Mode einen Fehler. Weise für Änderungen immer ein neues Array zu, zum Beispiel el.ariaFlowToElements = [...alt, neu].
Kompatibilität: Die ARIA-Elementreflexion ist relativ neu. Prüfe vorher mit 'ariaFlowToElements' in Element.prototype und falle bei Bedarf auf setAttribute('aria-flowto', ids) zurück.

Siehe auch

Element.ariaOwnsElements Element.ariaControlsElements Element.ariaDetailsElements Element.ariaLabelledByElements Element.ariaRelevant