Definition: Reflow bedeutet, dass sich Inhalte bei starker Vergrößerung neu anordnen, statt aus dem Bildschirm zu laufen. Nach WCAG 1.4.10 (Stufe AA) muss eine Seite bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen lesbar und bedienbar bleiben – das entspricht 400 % Zoom in einem 1280 Pixel breiten Fenster [1].
Englisch: Reflow · Zuletzt geprüft: 27. September 2026
Wer davon profitiert
Menschen mit Sehbehinderung vergrößern Seiten oft auf 200 bis 400 %. Müssen sie dann für jede Zeile nach rechts und wieder zurück scrollen, verlieren sie ständig den Faden. Mit Reflow scrollen sie nur in eine Richtung – bei Text von oben nach unten. Davon profitieren auch alle, die auf einem kleinen Smartphone lesen.
Was WCAG 1.4.10 genau verlangt
- Vertikal scrollende Inhalte (normale Webseiten): Bei 320 CSS-Pixel Breite darf kein horizontales Scrollen nötig sein.
- Horizontal scrollende Inhalte (etwa senkrechte Schrift): Bei 256 CSS-Pixel Höhe darf kein vertikales Scrollen nötig sein.
- Ausnahmen sind Inhalte, die eine zweidimensionale Anordnung brauchen, um verstanden zu werden: Karten, Diagramme, Videos, Spiele, Präsentationen, Datentabellen und Werkzeugleisten [1][2].
Nichts darf dabei verloren gehen. Eine Navigation, die in ein Menü-Symbol wandert, ist in Ordnung – eine, die einfach abgeschnitten wird, nicht.
Häufige Fehler
- Feste Breiten in Pixeln, etwa
width: 960pxfür den Inhaltsbereich. - Lange Wörter, URLs oder Codezeilen, die nicht umbrechen.
- Fixierte Kopf- und Fußleisten, die bei Vergrößerung den halben Bildschirm füllen.
- Inhalte, die bei schmalem Fenster verschwinden, statt woanders zu erscheinen.
- Deaktivierter Zoom mit
user-scalable=noim Viewport-Meta-Tag.
Im Code
/* Bricht bei 320 px aus dem Fenster */
.content { width: 960px; }/* Passt sich jeder Breite an */
.content {
max-width: 60rem;
width: 100%;
overflow-wrap: anywhere;
}So prüfen Sie es
Stellen Sie das Browserfenster auf 1280 Pixel Breite und zoomen Sie auf 400 %. Oder verkleinern Sie das Fenster auf 320 Pixel Breite, etwa in den Entwicklerwerkzeugen. Gehen Sie die Seite durch: Taucht eine horizontale Scrollleiste auf? Fehlt Inhalt? Lassen sich Menüs, Formulare und Dialoge noch bedienen?
Wie Reviseberg damit umgeht
Reviseberg prüft jede Seite zusätzlich bei 360 Pixel Breite. In diesem Durchlauf laufen die axe-core-Regeln, die erst im schmalen Layout scheitern können: Kontrast, Zielgröße, ein gesperrter Zoom im Viewport-Meta-Tag (meta-viewport) und scrollbare Bereiche ohne Tastaturzugang. Ob eine Seite bei 320 Pixel horizontal scrollt oder Inhalte verliert, entscheidet dieser Durchlauf nicht. Ein Zoom- und Reflow-Agent ist heute nicht Teil von Reviseberg. Reviseberg führt 1.4.10 deshalb als nur teilweise automatisch prüfbar – den Rest testet ein Mensch.
Verwandte Begriffe
Bildschirmlupe · Textabstände · Zielgröße · Kontrastverhältnis