1.4.10 Umbruch (Reflow)

Was bedeutet das?

Wer stark vergrößert, sieht nur einen kleinen Ausschnitt der Seite. Muss man dann für jede Zeile nach rechts und wieder zurück scrollen, ist Lesen kaum möglich. Deshalb soll sich der Inhalt bei einer Breite von 320 CSS-Pixeln in eine Spalte umbrechen, ohne dass Informationen oder Funktionen verloren gehen. Bei Seiten, die waagerecht gelesen werden, gilt das entsprechend für eine Höhe von 256 CSS-Pixeln.

Ausgenommen sind Inhalte, die für ihre Nutzung ein zweidimensionales Layout brauchen: Datentabellen, Landkarten, Diagramme, Videos, Spiele, Präsentationen und Bedienleisten, die nebeneinander stehen müssen. Für eine breite Tabelle darf also ein eigener Scrollbereich bleiben, die übrige Seite muss trotzdem umbrechen.

Wem hilft das?

• Menschen mit Sehbehinderung, die stark vergrößern
• Menschen, die auf schmalen Smartphone-Bildschirmen lesen
• Menschen mit motorischen Einschränkungen, denen das Scrollen in zwei Richtungen schwerfällt

Typische Fehler

• Container mit fester Breite in Pixeln, etwa width: 1200px
• Lange Wörter, URLs oder Codezeilen, die über den Rand hinausragen
• Kopfbereiche und Cookie-Hinweise mit fester Höhe, die bei Vergrößerung den Inhalt verdecken
• Inhalte, die mit overflow: hidden einfach abgeschnitten werden

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Bei 320 CSS-Pixel Breite: kein horizontales Scrollen, nichts abgeschnitten (siehe Screenshot und Messung).

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

.wrapper { width: 1200px; }
.columns { display: flex; }
.columns > * { width: 400px; }

.wrapper { max-width: 75rem; margin-inline: auto; }
.columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.columns > * { flex: 1 1 18rem; min-width: 0; }
p, a { overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; } /* nur für Datentabellen */

Spalten brechen bei wenig Platz untereinander um, lange Wörter werden umbrochen, und nur die Datentabelle darf seitlich scrollen.

Praxistipps

• Testen Sie, indem Sie das Browserfenster auf 1280 Pixel Breite stellen und auf 400 % zoomen.

Ratgeber und Muster dazu

• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.10 Reflow