Reflow (WCAG 1.4.10): Kein horizontales Scrollen bei 320 px

Menschen mit Sehbehinderungen vergrößern Webseiten oft auf 400 % und mehr. Wenn dabei horizontales Scrollen entsteht, geht der Lesefluss verloren und Inhalte werden praktisch unzugänglich. Das BFSG fordert über die EN 301 549 die Einhaltung von WCAG 2.1 Level AA – Reflow ist damit keine optionale Verbesserung, sondern gesetzliche Pflicht für digitale Produkte und Dienstleistungen.

Was genau fordert WCAG 1.4.10?

WCAG 1.4.10 Reflow verlangt, dass Inhalte bei einer Viewport-Breite von 320 CSS-Pixeln ohne Informations- oder Funktionsverlust dargestellt werden können – ohne dass horizontales Scrollen nötig wird. Für vertikal scrollende Seiten gilt die 320-px-Grenze in der Breite; für horizontal scrollende Inhalte (z. B. ostasiatische Schriften) gilt eine Mindesthöhe von 256 CSS-Pixeln. Ausnahmen bestehen für Inhalte, die eine zweidimensionale Darstellung zwingend benötigen: Datentabellen, Karten, Diagramme, Videos und Toolbars. Diese dürfen horizontal scrollen, müssen aber trotzdem bedienbar bleiben.

Technische Umsetzung

Die wichtigsten Techniken für Reflow sind: Responsive Design mit relativen Einheiten (%, em, rem, vw) statt fester Pixel-Angaben. CSS Flexbox und Grid ermöglichen fließende Layouts, die sich automatisch umbrechen. Media Queries passen Layout-Bereiche an verschiedene Breiten an. max-width statt width verhindert Überlauf bei schmalen Viewports. Verzichte auf overflow: hidden für Textbereiche – das schneidet Inhalte ab statt sie umzubrechen. Teste mit width: 320px im Browser-DevTools oder durch Zoom auf 400 % bei 1280 px Standard-Viewport.

Häufige Reflow-Fehler

Feste Breiten: Elemente mit width: 960px oder ähnlichen absoluten Werten brechen nicht um. Horizontale Scrollbars: Oft durch Elemente verursacht, die breiter als ihr Container sind (z. B. große Bilder ohne max-width: 100%). Overlapping Text: Wenn Spalten bei schmalem Viewport übereinander liegen, weil kein Umbruch definiert ist. Off-Screen-Inhalte: Navigation oder Seitenleisten, die bei 320 px nicht erreichbar sind. Tabellen als Layout: HTML-Tabellen für Layout-Zwecke missbraucht – sie können nicht umbrechen.

WCAG-Bezug

WCAG 1.4.10 Reflow gehört zu Level AA und ist damit Teil der vom BFSG geforderten Konformitätsstufe. Die Europäische Norm EN 301 549, Abschnitt 11.1.4.10, übernimmt dieses Kriterium direkt. Reflow steht in enger Verbindung zu WCAG 1.4.4 (Resize Text, Level AA) – während 1.4.4 die Vergrößerung auf 200 % fordert, geht 1.4.10 weiter und verlangt ein funktionierendes Layout bei 400 % Zoom. Auch WCAG 1.4.12 (Text Spacing) ist verwandt: Wenn vergrößerter Text mit angepasstem Zeilenabstand das Layout sprengt, liegt oft auch ein Reflow-Problem vor.