A: Die visuelle Reihenfolge auf der Seite folgt der DOM-Reihenfolge (WCAG 1.3.2)

Das bedeutet

Die Reihenfolge der Inhalte im Code (DOM) sollte der visuellen Darstellung auf der Seite entsprechen. Das bedeutet: Elemente, die optisch oben oder links angezeigt werden, sollten auch im Quellcode vor den darunter- oder rechtsstehenden Elementen stehen. So bleibt die inhaltliche Struktur für Screenreader, Tastaturnavigation und andere assistive Technologien nachvollziehbar.

Auswirkung

Wenn die visuelle und die DOM-Reihenfolge voneinander abweichen, erleben Nutzer und Nutzerinnen mit Screenreader oder Tastatursteuerung die Seite in einer anderen Reihenfolge als sichtbar ist. Das kann zu Verwirrung führen, wichtige Inhalte werden möglicherweise übersehen oder in falschem Kontext vorgelesen. Der Fehler verletzt WCAG 1.3.2 (A) Bedeutungsreihenfolge.

Empfehlung

Achten Sie darauf, dass die HTML-Struktur logisch aufgebaut ist und dem visuellen Layout folgt.
Verwenden Sie CSS-Eigenschaften wie flexbox oder grid nur, um Elemente optisch neu anzuordnen, nicht um die inhaltliche Reihenfolge zu verändern.
Prüfen Sie regelmäßig mit der Tastatur oder einem Screenreader, ob der Lesefluss dem sichtbaren Aufbau entspricht.
Vermeiden Sie es, wichtige Inhalte visuell an eine andere Position zu verschieben, als sie im DOM erscheinen.

Beispiele

Problematisch:

<div style="display:flex; flex-direction:row-reverse;">
  <button>Zurück</button>
  <button>Weiter</button>
</div>

Visuell erscheint die Schaltfläche Weiter rechts, im DOM steht sie aber vor Zurück. Screenreader lesen daher zuerst Weiter, was verwirrend ist.

Besser:

<div style="display:flex;">
  <button>Zurück</button>
  <button>Weiter</button>
</div>

Hier entspricht die visuelle Reihenfolge der tatsächlichen Struktur im DOM. Screenreader und Tastaturnutzer erleben dieselbe Reihenfolge.

Hinweis

Visuelle Anpassungen durch CSS dürfen den inhaltlichen Lesefluss nicht verändern. Die DOM-Reihenfolge ist maßgeblich für die Wahrnehmung und Orientierung assistiver Technologien – sie bestimmt, was zuerst gelesen oder fokussiert wird.

Verknüpftes WCAG-Kriterium:
WCAG 1.3.2 – Bedeutungsreihenfolge
Zur offiziellen WCAG-Dokumentation →