WCAG 1.4.10: Reflow (Umbruch)

Inhalte müssen sich so umbrechen lassen, dass bei einer Breite von 320 CSS-Pixeln – das entspricht 400 % Zoom auf einem 1280-px-Fenster – kein Scrollen in zwei Richtungen nötig ist: vertikal scrollen ja, horizontal lesen nein. (Englisch: Reflow; die deutsche Übersetzung sagt „Umbruch“.)

Was verlangt das Kriterium?

Wer stark zoomt, liest wie durch ein Fernglas. Muss er dabei für jede Zeile horizontal hin- und herscrollen, wird Lesen zur Sisyphusarbeit. Deshalb: Bei 320 px Breite muss der Inhalt einspaltig umbrechen – Text fließt, nichts wird abgeschnitten, keine zwei Scroll-Achsen.

Ausgenommen sind Inhalte, die zwingend zwei Dimensionen brauchen: Datentabellen, Karten, Diagramme, Code-Blöcke, Toolbars. Für sie ist horizontales Scrollen des Elements erlaubt – der Rest der Seite muss trotzdem umbrechen.

Wen betrifft es besonders?

Nutzer von Bildschirmvergrößerung und Browser-Zoom – die vielleicht größte unsichtbare Nutzergruppe. Als Nebeneffekt ist 1.4.10 der Barrierefreiheits-Segen des responsiven Designs: Wer sauber für schmale Viewports baut, hat das Kriterium meist erfüllt.

Richtig & falsch im Code

/* Falsch: feste Breite erzwingt horizontales Scrollen */
.wrapper { width: 1200px; }

/* Richtig: fluide Breite mit Obergrenze */
.wrapper { max-width: 75rem; padding-inline: 1rem; }

/* Falsch: Mindestbreite auf Layout-Ebene */
.card-grid { display: grid; grid-template-columns: repeat(3, 400px); }

/* Richtig: Raster bricht selbstständig um */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

Klassische Reflow-Brecher: fixe Pixelbreiten, min-width auf Containern, lange URLs/Wörter ohne overflow-wrap: break-word, absolut positionierte Elemente – und eingebettete Inhalte (iframes, Anzeigen), die eigene Breiten mitbringen.

So testest du es

1. DevTools: Responsive-Modus auf 320 × 256 px stellen – jede Kernseite durchscrollen: erscheint eine horizontale Scrollleiste im Fließtext?
2. Zoom-Probe: Fenster auf 1280 px, Zoom auf 400 % – identisches Ergebnis, näher am echten Nutzerverhalten.
3. Ausnahmen prüfen: Scrollen Tabellen & Co. nur innerhalb ihres Rahmens (overflow-x: auto am Element), während die Seite umbricht?

Verwandte Themen

• Reflow, Zoom & Textabstände – der Praxis-Leitfaden
• 1.4.4 Textgröße ändern – die 200-%-Vorstufe
• 1.3.4 Ausrichtung – flexible Layouts für beide Orientierungen