Reflow (deutsch: Umbruch) beschreibt die Fähigkeit einer Seite, ihre Inhalte umzubrechen und anzupassen, sodass kein horizontales Scrollen nötig wird. Wer schlecht sieht, vergrößert den Text oft stark. Ohne Reflow läuft Text dann nach rechts aus dem Bild, und man muss jede Zeile mühsam hin- und herschieben. Das WCAG-Erfolgskriterium 1.4.10 (Reflow, Stufe AA) verhindert das.
Was genau gefordert ist
Inhalte müssen sich ohne Verlust von Information oder Funktion in zwei Dimensionen darstellen lassen, ohne dass in einer Richtung gescrollt werden muss:
- Bei vertikal scrollendem Inhalt (typische Website): bis zu einer Breite von 320 CSS-Pixeln – das entspricht 1280 px bei 400 % Zoom.
- Bei horizontal scrollendem Inhalt: bis zu einer Höhe von 256 CSS-Pixeln.
Ausgenommen sind Inhalte, die zwingend zweidimensional bleiben müssen, etwa Datentabellen, Landkarten oder komplexe Diagramme.
Wie du es umsetzt
Reflow ist im Kern responsives Webdesign, sauber umgesetzt:
- Nutze flexible Layouts (Flexbox, Grid) und relative Einheiten statt fester Pixelbreiten.
- Vermeide feste
width-Werte, die breiter als der Viewport sind. - Setze den Meta-Viewport so, dass Nutzer zoomen dürfen – sperre Pinch-Zoom nicht.
In WordPress entstehen Reflow-Probleme oft durch Page-Builder-Sektionen mit fixen Breiten oder durch negative Ränder. So testest du: Stelle den Browser-Zoom auf 400 % und prüfe, ob du nur vertikal scrollst. Tauchen waagrechte Scrollbalken auf, ist der Reflow verletzt. Reflow gehört eng zu Textvergrößerung und zählt zu den POUR-Prinzipien (wahrnehmbar). Es ist eine Anforderung der WCAG 2.1 auf Stufe AA.