Reflow und responsives Layout

Warum Reflow wichtig ist

Stell dir vor, du hast eine leichte Sehbehinderung und vergrößerst den Inhalt einer Website so weit, bis du ihn bequem lesen kannst, sagen wir auf das Vierfache. Wenn die Seite darauf nicht vorbereitet ist, passiert oft etwas Mühsames: Die Zeilen werden nicht umgebrochen, sondern laufen breit aus dem Bild heraus. Du musst jetzt für jede einzelne Zeile waagerecht hin- und herscrollen, um sie zu Ende zu lesen. Das nennt man Scrollen in zwei Dimensionen, und es macht längere Texte praktisch unlesbar.

Reflow(deutsch etwa „Neuumbruch") ist die Antwort darauf: Inhalte sollen sich beim Vergrößern oder auf schmalen Bildschirmen umbrechen und in einer einzigen Spalte untereinander anordnen, sodass nur noch in eine Richtung gescrollt werden muss, nämlich nach unten. Davon profitieren nicht nur Menschen mit Sehbehinderung, sondern alle, die kleine Displays, geteilte Fenster oder einen starken Browser-Zoom nutzen.

Was 1.4.10 genau verlangt

Das Erfolgskriterium 1.4.10 Reflow gehört zur Konformitätsstufe AA, also genau der Stufe, die BFSG und BITV in der Praxis verlangen. Es kam mit WCAG 2.1 neu hinzu und gilt unverändert in 2.2. Ein Erfolgskriterium ist dabei eine einzeln prüfbare Anforderung der Web Content Accessibility Guidelines.

Die Regel verlangt, dass Inhalte ohne Informationsverlust und ohne Scrollen in zwei Dimensionen dargestellt werden können:

• bei vertikal scrollendem Inhalt (der Normalfall) bis zu einer Breite von 320 CSS-Pixel,
• bei horizontal scrollendem Inhalt (z. B. bei senkrechter Schrift) bis zu einer Höhe von 256 CSS-Pixel.

Diese 320 Pixel sind kein zufälliger Wert: Sie entsprechen einem üblichen Browserfenster von 1280 Pixel Breite, das auf 400 % vergrößert wird. Ein CSS-Pixel ist dabei die Maßeinheit, mit der das Layout rechnet. Sie bleibt beim Zoomen gleich, während der Inhalt optisch größer wird. Wer also seine Seite bei 1280 Pixel Fensterbreite auf 400 % zoomt und alles ohne seitliches Scrollen lesen kann, erfüllt das Kriterium in der Regel.

Die Ausnahme für zweidimensionale Inhalte

Manche Inhalte verlieren ihren Sinn, wenn man sie in eine schmale Spalte presst. Deshalb nimmt 1.4.10 ausdrücklich Teile aus, die für ihre Nutzung oder Bedeutung eine zweidimensionale Anordnung brauchen. Für solche Teile darf weiterhin in beide Richtungen gescrollt werden.

Dazu zählen laut WCAG zum Beispiel:

Wichtig ist das Wort Teil : Ausgenommen ist nur der konkrete zweidimensionale Inhalt selbst, etwa die gesamte Datentabelle, nicht jede einzelne Zelle. Der Text drumherum, die Überschriften, die Bedienelemente müssen weiterhin umbrechen. Die Ausnahme ist also kein Freibrief, eine ganze Seite vom Reflow auszunehmen.

Reflow technisch umsetzen

Die gute Nachricht: Wer modernes, responsives CSS schreibt, erfüllt Reflow fast nebenbei. Drei Bausteine tragen den größten Teil:

• Relative statt fester Breiten. Container in Prozent, max-width oder flexiblen Einheiten statt in festen Pixelwerten. Ein width: 900px kann auf 320 Pixel nicht umbrechen.
• Flexible Layouts mit Flexbox oder Grid. Spalten, die per flex-wrap oder auto-fit untereinander rutschen, sobald der Platz knapp wird.
• Media Queries als Feinschliff. An definierten Breakpoints (Umbruchpunkten) wird ein Mehrspalter zur Einspalte.

 /* Die Spalten ordnen sich automatisch um, sobald */ 
 /* eine Mindestbreite unterschritten wird.        */.karten {
  display: grid 
;
  grid-template-columns: repeat 
(auto-fit, minmax(220px, 1fr));
  gap: 20px 
;
} /* Spätestens auf schmalen Breiten: garantiert eine Spalte */ 
@media (max-width: 600px 
) {
  .karten { grid-template-columns: 1fr 
; }
}

Eine zweite, oft übersehene Voraussetzung steckt im Kopf des Dokuments: Das Viewport-Meta-Tag darf das Zoomen nicht verbieten. Ein user-scalable=no oder ein fest gesetztes maximum-scale=1 sperrt die Vergrößerung, und damit fällt Reflow gleich mit. Richtig ist die schlichte Variante:

 <!-- gut: erlaubt Vergrößern und Umbrechen --> 
<meta name= "viewport" 
content= "width=device-width, initial-scale=1" 
>

Die häufigsten Stolperfallen

Die meisten Reflow-Verstöße entstehen nicht aus Absicht, sondern aus einzelnen Elementen, die sich dem Umbruch widersetzen. Diese drei tauchen besonders oft auf:

• Feste Pixelbreiten. Ein Banner, eine Tabelle oder ein <div> mit width: 980px sprengt jede schmale Ansicht.
• Lange, nicht umbrechbare Zeichenketten. Sehr lange URLs, Code-Schnipsel oder Hashtags ohne Leerzeichen schieben das Layout auf. Hier hilft overflow-wrap: break-word . Die zugehörige WCAG-Technik C33 beschreibt genau diesen Fall.
• Erzwungenes horizontales Scrollen. Container mit white-space: nowrap oder einer festen Mindestbreite, die das Umbrechen aktiv unterbinden.

Reflow, Textvergrößerung und responsives Design

Reflow wird leicht mit zwei verwandten Themen verwechselt. Die Abgrenzung hilft, beim Testen das Richtige zu prüfen.

Das eng verwandte Kriterium 1.4.4 Text vergrößern(ebenfalls AA) verlangt, dass sich Text bis 200 % vergrößern lässt, ohne dass Inhalt oder Funktion verloren gehen. 1.4.10 geht weiter: Es betrifft die gesamte Darstellung bei 400 % und schließt das zweidimensionale Scrollen aus. Und responsives Design schließlich ist keine Vorschrift, sondern die gängige Methode , mit der man beide Kriterien erfüllt: der Weg, nicht das Ziel.

Praxis-Checkliste

1. Bricht der Inhalt bei 320 CSS-Pixel Breite in eine Spalte um?
2. Lässt sich die Seite bei 1280 px Fenster auf 400 % zoomen, ohne dass Text seitlich herausläuft?
3. Erlaubt das Viewport-Meta-Tag das Zoomen (kein user-scalable=no )?
4. Gibt es feste Pixelbreiten, die das Umbrechen verhindern?
5. Brechen lange URLs und Zeichenketten per overflow-wrap um?
6. Ist 2D-Scrollen nur dort übrig, wo es erlaubt ist (Tabellen, Karten, Diagramme)?
7. Bleibt bei umgebrochenem Layout alle Information und Funktion erhalten?
8. Wurde mit echtem Browser-Zoom getestet, nicht nur durch Fenster-Verkleinern?

Mythen-Prüfung