1.4.10 Umbruch (Reflow)

1. Was ist das Ziel dieses Kriteriums?

Mobile Geräte sind heute überall. Aber was passiert, wenn Menschen eine Website auf 400 % vergrößern müssen, um überhaupt etwas zu erkennen? Oder wenn der Browser nur auf einem halben Bildschirm läuft, weil jemand nebenher arbeitet?

Das Ziel von Erfolgskriterium 1.4.10 ist klar: Inhalte sollen sich an schmale Darstellungsbereiche anpassen, ohne dass Informationen verschwinden oder unbenutzbar werden. Konkret heißt das: Websites müssen auch in sehr schmalen Viewports funktionieren – ohne dass Nutzer:innen in zwei Richtungen scrollen müssen, um eine Textzeile zu lesen.

2. Was fordert das Erfolgskriterium genau?

Das Kriterium fordert, dass Inhalte ohne Verlust von Informationen oder Funktionen dargestellt werden können, ohne dass Scrollen in zwei Dimensionen nötig ist:

Für vertikal scrollende Inhalte: bei einer Breite von 320 CSS-Pixeln. Das entspricht einem 1280 CSS-Pixel breiten Fenster bei 400 % Zoom.

Für horizontal scrollende Inhalte (z. B. vertikale Schrift): bei einer Höhe von 256 CSS-Pixeln. Das entspricht einem 1024 CSS-Pixel hohen Fenster bei 400 % Zoom.

Ausgenommen sind Teile, die ein zweidimensionales Layout für Nutzung oder Bedeutung brauchen, zum Beispiel:

• Bilder, die zum Verständnis nötig sind, wie Karten und Diagramme
• Videos und Spiele
• Präsentationen
• Datentabellen (aber nicht der Inhalt einzelner Zellen)
• Oberflächen, bei denen Werkzeugleisten beim Bearbeiten sichtbar bleiben müssen

Für diese Teile ist zweidimensionales Scrollen in Ordnung – der Rest der Seite muss trotzdem umbrechen.

Ein praktisches Beispiel: Eine News-Website zeigt ihre Artikel-Teaser normalerweise in drei Spalten. Bei schmalem Viewport stapeln sich die Teaser untereinander – alle Informationen bleiben verfügbar, nur die Anordnung ändert sich.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du musst eine Website bei 400 % Zoom nutzen, um die Schrift lesen zu können – aber jede Textzeile läuft rechts aus dem Bildschirm. Du müsstest für jeden einzelnen Satz hin- und herscrollen.

Umbrechende Inhalte schaffen Barrierefreiheit, weil sie:

• Menschen mit Sehbehinderungen ermöglichen, Inhalte stark zu vergrößern, ohne die Lesbarkeit zu verlieren
• In mobilen Situationen helfen, wenn nur ein schmaler Bildschirm zur Verfügung steht
• Menschen mit motorischen Einschränkungen das anstrengende Hin- und Herscrollen ersparen
• Die kognitive Belastung reduzieren, weil die Leserichtung gleich bleibt
• Die Orientierung auf der Seite erleichtern, auch bei starker Vergrößerung

Und nebenbei: Responsive Design ist heute Standard – 1.4.10 stellt sicher, dass diese Flexibilität auch bei hohen Zoomstufen funktioniert. Die Grundlage dafür legt Textgröße ändern mit 200 %.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Moderne responsive Websites erfüllen oft schon viele Anforderungen. Bei hohem Zoom zeigen sich aber die eigentlichen Herausforderungen.

Grundlegende Techniken:

Media Queries nutzen: Definiere Breakpoints für schmale Viewports und passe das Layout entsprechend an. Dein Layout muss bei 320 CSS-Pixeln Breite noch funktionieren.

Flexbox und CSS Grid: Diese Layout-Methoden helfen dabei, Inhalte automatisch umzubrechen und neu anzuordnen.

Relative Einheiten verwenden: em, rem und % statt fester Pixelbreiten – so passt sich das Layout an.

Fixierte Elemente entschärfen: Kopfzeilen, Fußzeilen oder Seitenleisten, die bei großen Bildschirmen „kleben“, sollten bei schmalen Viewports normal mitscrollen. Sonst bleibt bei starkem Zoom kaum Platz für den Inhalt – und sie können den Fokus verdecken (siehe Fokus nicht verdeckt (Minimum)).

Navigation zusammenklappen: Fasse umfangreiche Navigation bei schmalen Viewports hinter einem Menü-Button zusammen, der per Tastatur bedienbar ist.

Typische Fallstricke vermeiden:

• Datentabellen in eigene, horizontal scrollbare Container packen (overflow-x: auto), damit sie die Seitenbreite nicht sprengen
• Bilder und Videos mit max-width: 100% begrenzen
• Lange URLs oder Wörter umbrechen lassen, z. B. mit overflow-wrap: anywhere
• Container mit fester Breite durch flexible Alternativen ersetzen

Test-Tipp: Stelle dein Browserfenster auf 1280 CSS-Pixel Breite, zoome auf 400 % und prüfe, ob alle Inhalte ohne horizontales Scrollen lesbar und alle Funktionen erreichbar bleiben. Alternativ simulierst du in den Entwicklertools einen 320 CSS-Pixel breiten Viewport.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Umbrechende Layouts sind nicht nur eine Anforderung der Barrierefreiheit – sie sind ein echter Vorteil in einer mobilen Welt.

1. Zielgruppe erweitern

Laut WHO leben weltweit rund 1,3 Milliarden Menschen mit einer erheblichen Behinderung, viele davon mit Sehbeeinträchtigungen. Dazu kommen alle, die vorübergehend schlechter sehen: Handy-Nutzer:innen in hellem Sonnenlicht, ältere Menschen, Menschen nach einer Augen-OP. Ein Layout, das umbricht, macht deine Inhalte für sie zugänglich.

2. Mobile Nutzung verbessern

Mit 1.4.10 stellst du sicher, dass deine Website nicht nur auf Smartphones funktioniert, sondern auch bei geteiltem Bildschirm, in schmalen Fenstern oder bei hohen Zoomstufen.

3. Zukunftssicherheit schaffen

Neue Geräteformate entstehen ständig: faltbare Smartphones, kleine Tablets, ungewöhnliche Seitenverhältnisse. Flexible Layouts passen sich an – ohne dass du für jedes neue Gerät neu gestalten musst.

Und nicht zuletzt: rechtliche Anforderungen. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Produkte und Dienstleistungen für Verbraucher:innen, etwa Online-Shops. Technischer Maßstab ist die EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist – 1.4.10 gehört dazu. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht verpflichtet. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 1.4.10 Reflow (Level AA)

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

Note 1: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.

Note 2: Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.

Kurz gesagt: Inhalte müssen bei 320 CSS-Pixeln Breite (bzw. 256 CSS-Pixeln Höhe bei horizontal scrollenden Inhalten) ohne Scrollen in zwei Richtungen und ohne Verlust von Informationen oder Funktionen nutzbar sein – außer bei Teilen, die ein zweidimensionales Layout brauchen.