WCAG 1.4.10 Umfluss (Reflow)

Das Erfolgskriterium 1.4.10 hilft sehbehinderten Menschen, die eine Seite stark vergrößern. Fließen die Inhalte in eine Spalte um, scrollen sie nur in eine Richtung; tun sie es nicht, müssen sie in jeder Zeile nach links und rechts scrollen. Es kam mit WCAG 2.1 hinzu, gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.4.10). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Inhalte lassen sich ohne Verlust von Informationen oder Funktionen und ohne Scrollen in zwei Dimensionen darstellen, und zwar:

• vertikal scrollende Inhalte (normale Webseiten) bei einer Breite, die 320 CSS-Pixeln entspricht;
• horizontal scrollende Inhalte bei einer Höhe, die 256 CSS-Pixeln entspricht.

320 CSS-px zeigt ein Desktop-Browserfenster mit 1280 CSS-px Breite bei 400 % Zoom; 256 CSS-px entsprechen einem 1024 px hohen Fenster bei 400 %.

Ausnahme: Teile des Inhalts, die für Nutzung oder Bedeutung ein zweidimensionales Layout erfordern. Die WCAG nennen Bilder wie Karten und Diagramme, Video, Spiele, Präsentationen, Datentabellen (nicht ihre einzelnen Zellen) und Oberflächen, bei denen Werkzeugleisten während der Arbeit am Inhalt sichtbar bleiben müssen. Nur diese Teile dürfen in beide Richtungen scrollen.

Typische Fehler in Onlineshops

• eine Seite, die bei 320 px breiter als der Bildschirm ist, wegen eines Banners, iframes oder einer Tabelle mit Produktvarianten mit fester Breite;
• Hauptmenü oder Filter, die bei hohem Zoom verschwinden, ohne dass es einen anderen Weg zu ihnen gibt;
• ein fixierter Header und eine Cookie-Leiste, die den Großteil eines kleinen Viewports verdecken;
• lange Produktnamen, Artikelnummern oder URLs, die nicht umbrechen und das Layout zur Seite schieben;
• ein zweispaltiger Checkout, der nicht passt und horizontales Scrollen erfordert.

So prüfen Sie es

Automatisch: Keine automatische Regel unseres Checkers ist diesem Kriterium zugeordnet. Der Reflow hängt vom Layout bei einer bestimmten Zoomstufe ab und davon, ob etwas verloren geht — das kann eine Regel nicht beurteilen. Hier ist eine manuelle Prüfung nötig.

Manuell: Stellen Sie ein Desktop-Browserfenster auf 1280 px Breite und zoomen Sie auf 400 %, oder nutzen Sie für horizontale Inhalte die Geräteemulation mit 320 × 256 px. Gehen Sie Startseite, Kategorie, Produkt, Warenkorb und Checkout durch. Prüfen Sie, dass Sie nie seitwärts scrollen, um Text zu lesen, dass alle Inhalte und Menüs noch da sind und sich nichts überlappt.

So beheben Sie es

• Verwenden Sie ein responsives Layout mit flexiblen Breiten (Prozentbreiten, max-width, minmax() im Grid) statt fester Pixelbreiten.
• Lassen Sie lange Wörter und URLs umbrechen (overflow-wrap: anywhere).
• Setzen Sie breite Datentabellen in einen eigenen scrollbaren Container und lassen Sie den Rest der Seite umfließen.
• Machen Sie eingebettete Videos und iframes responsiv.
• Halten Sie fixierte Header klein oder heben Sie die Fixierung bei schmalen Breiten auf.

Verwandte Kriterien

• 1.4.4 Textgröße ändern — Text bei 200 % Zoom.
• 1.4.12 Textabstand — größere Abstände ohne Verlust.
• 1.3.4 Bildschirmausrichtung — Hoch- und Querformat.

Häufige Fragen

Wie teste ich den Reflow nach WCAG?

Öffnen Sie die Seite in einem Desktop-Browserfenster mit 1280 CSS-px Breite und zoomen Sie auf 400 %, oder stellen Sie in den Entwicklertools einen Viewport von 320 px Breite ein. Scrollen Sie durch die Seite und erledigen Sie die wichtigsten Aufgaben: Sie sollten nie seitwärts scrollen müssen, um Text zu lesen oder ein Bedienelement zu erreichen.

Dürfen Datentabellen horizontal scrollen?

Ja. Inhalte, die für ihre Bedeutung oder Nutzung ein zweidimensionales Layout brauchen — Datentabellen, Karten, Diagramme, Video, Spiele, Werkzeugleisten, die sichtbar bleiben müssen —, dürfen in zwei Richtungen scrollen. Der Rest der Seite muss trotzdem umfließen.

Reicht ein responsives Theme für 1.4.10?

Meist ist es ein guter Anfang, aber testen Sie trotzdem. Elemente mit fester Breite, breite Einbettungen, lange Wörter oder URLs und fixierte Header brechen den Reflow oft auch in responsiven Themes.

Was ist der Unterschied zwischen 1.4.4 und 1.4.10?

1.4.4 Textgröße ändern verlangt, dass Text bei 200 % Zoom funktioniert. 1.4.10 Umfluss verlangt, dass Inhalte bei 400 % (320 px Breite) ohne horizontales Scrollen passen.