WCAG 1.3.2: Bedeutungstragende Reihenfolge

Wenn die Reihenfolge von Inhalten für ihr Verständnis wichtig ist, muss die korrekte Lesereihenfolge programmatisch ermittelbar sein – sprich: Das DOM muss in der Reihenfolge stehen, in der der Inhalt Sinn ergibt. CSS darf anordnen, aber nicht umerzählen. (Englisch: Meaningful Sequence.)

Was verlangt das Kriterium?

Screenreader und Reader-Modi lesen das DOM von oben nach unten – nicht den Bildschirm. Wer per CSS (order, flex-direction: row-reverse, absolute Positionierung, Grid-Platzierung) die visuelle Reihenfolge von der DOM-Reihenfolge entkoppelt, erzählt zwei verschiedene Geschichten: eine für Sehende, eine für alle anderen. Erlaubt ist Umordnung nur, wo die Reihenfolge keine Bedeutung trägt (rein dekorative Anordnung).

Wen betrifft es besonders?

Screenreader-Nutzer und Nutzer von Braillezeilen, die der DOM-Reihenfolge folgen – außerdem Tastaturnutzer, denn die Fokus-Reihenfolge (2.4.3) folgt ebenfalls dem DOM. Ein visuell „linkes“ Feld, das im DOM zuletzt kommt, wird als letztes fokussiert – und verwirrt zusätzlich Vergrößerungs-Nutzer, die dem Fokus folgen.

Richtig & falsch im Code

/* Falsch: Preis-Zeile visuell nach oben gezogen –
   der Screenreader liest sie weiter am Ende */
.produkt-preis {
  order: -1;
}

<!-- Richtig: Das DOM erzählt die richtige Reihenfolge,
     CSS layoutet innerhalb dieser Logik -->
<article class="produkt">
  <h3>Ergonomische Tastatur</h3>
  <p class="produkt-preis">89 €</p>
  <p class="produkt-beschreibung">Geteiltes Layout, …</p>
</article>

Faustregel: Erst das DOM in Sinn-Reihenfolge schreiben, dann layouten. Wenn ein Design zwingend eine andere visuelle Ordnung braucht, ist meist das DOM falsch herum aufgebaut – umsortieren kostet weniger als die Doppel-Erzählung.

So testest du es

1. CSS-aus-Test: Stylesheet deaktivieren (oder Reader-Modus öffnen) – ergibt die Reihenfolge noch Sinn?
2. Tab-Durchlauf: Springt der Fokus kreuz und quer, ist meist order oder Positionierung im Spiel.
3. Screenreader-Probe: Mit NVDA linear durch kritische Bereiche (Karten, mehrspaltige Layouts, Formulare) lesen lassen.
4. Code-Review-Blick: Jedes order und row-reverse im CSS ist ein Prüfkandidat.

Verwandte Themen

• 2.4.3 Fokus-Reihenfolge – dasselbe Prinzip für die Tastatur
• 1.3.1 Info und Beziehungen – Struktur im Markup
• „div-soup“ vermeiden – sauberes DOM als Ausgangspunkt