Umfluss

Was gefordert wird

Wenn das Browserfenster 320 CSS-Pixel breit ist — was einem 1.280-Pixel-Desktop bei 400 % Zoom oder einem kleinen Mobilgerät entspricht — müssen Inhalte in eine einzelne Spalte umfließen, ohne dass horizontales Scrollen erforderlich wird. Nutzende sollten niemals sowohl vertikal als auch horizontal scrollen müssen, um durchgehende Inhalte zu lesen. Wesentliche Ausnahmen sind erlaubt: Datentabellen, komplexe Karten, Code-Beispiele und Präsentationen, bei denen das zweidimensionale Scrollen grundlegend für den Inhalt ist.

Wie es erfüllt wird

• Das Layout mobile-first mit Flexbox oder CSS Grid aufbauen, das bei kleinen Breiten in eine einzelne Spalte zusammenfällt.
• Bei exakt 320 Pixeln Viewport-Breite testen — oder bei 400 % Browser-Zoom auf einem 1.280-Pixel-Fenster — und jede Seite prüfen.
• max-width: 100% auf Bilder, Videos und eingebettete Medien anwenden, damit diese mit dem Viewport schrumpfen.
• Für die Navigation die horizontale Desktop-Navigation bei einem geeigneten Breakpoint in ein vertikales Mobilmenü überführen.
• Für Datentabellen horizontales Scrollen innerhalb eines overflow-x: auto-Containers zulassen — die Tabelle selbst ist ausgenommen, ihr Container sollte jedoch nicht die Seite seitwärts verschieben.
• Keine festen Pixel-Breiten für Body-Container oder modalen Dialoge verwenden.

Häufige Fehler

• Hero-Bereiche mit fester Breite (width: 1200px), die bei 320 Pixeln den Viewport überschreiten und horizontales Scrollen erzwingen.
• Modale Dialoge, die in vw oder px dimensioniert sind, 320 Pixel überschreiten und auf kleinen Bildschirmen abgeschnitten werden.
• Code-Beispiele in <pre>-Blöcken ohne Umbruch oder Scroll-Container, die die Seite seitwärts verschieben.
• Marketing-Seiten mit absolut positionierten dekorativen Elementen, die schmale Viewports nicht berücksichtigen.
• Fixierte Elemente, die bei 400 % Zoom Inhalte überlagern, weil sie für den Vollbreiten-Viewport dimensioniert wurden.
• Tabellen ohne Overflow-Container, sodass die gesamte Seite statt nur der Tabelle horizontal scrollt.

Warum es wichtig ist

Das Umfluss-Kriterium trifft die meisten Seiten, die zwar „responsive“ wirken, es aber nicht wirklich sind — ein Layout, das bei 320 CSS-Pixeln bricht, bricht auch bei 400 % Zoom für sehbehinderte Nutzende am Desktop. Beides ist mathematisch identisch. Die Behebung von Umflussproblemen bedeutet in der Regel, das responsive Design zu härten, das ohnehin schon größtenteils vorhanden war — damit zählt dieses Kriterium zu den WCAG-Korrekturen mit dem höchsten Wirkungsgrad.