Standards · WCAG 2.2

SC 1.3.2 Stufe A WCAG 2.0

Bedeutungsvolle Reihenfolge

Hängt die Verständlichkeit von Inhalten von ihrer Lesereihenfolge ab, muss die DOM-Reihenfolge mit der visuellen Reihenfolge übereinstimmen. CSS-Positionierung und Float, die die Abfolge durcheinanderbringen, beeinträchtigen Screenreader und Tastaturnavigation.

Was gefordert wird

Hängt die Bedeutung von Inhalten davon ab, in welcher Reihenfolge sie gelesen werden — Anweisungen, Erzähltexte, schrittweise Abläufe —, muss diese Reihenfolge im DOM erhalten bleiben. Screenreader und Reflow-Engines arbeiten die Quelle in Quellcode-Reihenfolge ab. Wenn CSS order, position: absolute, flex-direction: row-reverse oder Grid-Platzierung die visuelle Anordnung gegenüber der DOM-Reihenfolge verschiebt, bricht die Nutzungserfahrung zusammen.

Wie das Kriterium erfüllt wird

  • Den DOM in der Reihenfolge anlegen, in der der Inhalt gelesen werden soll; CSS dient der visuellen Positionierung, nicht der Festlegung der Lesereihenfolge.
  • Jede Verwendung von flex-direction: row-reverse, CSS order oder grid-area, die Inhalte aus ihrer Quellposition verschiebt, prüfen.
  • Bei mehrspaltigen Layouts die Spalten im DOM in Lesereihenfolge anordnen, nicht nach der visuellen Spaltenreihenfolge.
  • CSS deaktivieren (Browser-Entwicklungstools, „Quelltextansicht“) und prüfen, ob der ungestaltete Fluss noch Sinn ergibt.
  • Die Seite mit einem Screenreader durchgehen und jede Stelle notieren, an der die Ankündigungsreihenfolge überrascht.

Häufige Fehler

  • Eine Seitenleiste erscheint visuell rechts, steht aber im DOM zuerst — Screenreader lesen Werbung, verwandte Links und CTAs vor dem eigentlichen Artikeltext vor.
  • flex-direction: row-reverse bei einem Navigationsmenü — sehende Nutzende sehen Startseite / Über uns / Kontakt, der Screenreader liest Kontakt / Über uns / Startseite.
  • CSS order auf Formularfeldern verändert die visuelle Reihenfolge gegenüber der DOM-Reihenfolge, sodass die Tab-Taste unvorhersehbar springt.
  • Der „Zum Inhalt springen“-Link steht im DOM nach der Navigation, ist aber durch absolute Positionierung visuell oben platziert — Tastaturnutzende stoßen zuerst auf die Navigation.
  • Karten in einem Raster fließen visuell von links nach rechts, sind im DOM aber von unten nach oben angeordnet, weil ein cleverer Grid-Trick eingesetzt wurde.

Warum das wichtig ist

Fehler bei der bedeutungsvollen Reihenfolge sind heimtückisch — die Seite sieht korrekt aus, validiert fehlerfrei und besteht die meisten automatisierten Prüfungen. Sie treten erst zutage, wenn tatsächliche Screenreader-Nutzende versuchen, die Seite von oben nach unten zu lesen. Die meisten Korrekturen bestehen aus kleinen DOM-Umstellungen, doch der Diagnoseaufwand, das Problem überhaupt zu finden, ist hoch.