Inhalt bricht bei schmaler Darstellung nicht um (Reflow)
SchwerwiegendWCAG-Kriterium 1.4.10BFSG-relevant
Was ist das Problem?
Bei einer Fensterbreite von 320 CSS-Pixeln (entspricht 400 % Zoom auf einem Desktop) läuft der Seiteninhalt seitlich aus dem Fenster — Nutzer müssen horizontal scrollen, um Textzeilen zu lesen. Betroffen sind vor allem Menschen mit Sehschwäche, die stark zoomen, und Nutzer kleiner Smartphones.
Warum ist das relevant?
WCAG 2.1 Erfolgskriterium 1.4.10 (Reflow, Stufe AA) verlangt, dass Inhalte bei 320 px Breite ohne horizontales Scrollen nutzbar sind — ausgenommen sind Inhalte, die zwingend zweidimensional sind (z. B. Datentabellen oder Karten). BarriereWache misst dies mit einem eigenen Browser-Test bei 320 px Viewport-Breite; prüfe zweidimensionale Ausnahmen zusätzlich manuell.
So behebst du es
Ersetze feste Breiten (width: 900px) durch flexible (max-width: 100%, Prozentangaben, flex/grid mit Umbruch). Prüfe die Seite im Browser bei 320 px Fensterbreite: Alles, was seitliches Scrollen erzeugt, braucht einen Umbruch oder einen eigenen scrollbaren Container (overflow-x: auto) — die Seite selbst darf nicht scrollen. Stelle sicher, dass das viewport-Meta-Tag gesetzt ist: <meta name="viewport" content="width=device-width, initial-scale=1">.
Shopware
Meist verursachen eigene CSS-Anpassungen oder Erlebniswelten-Blöcke mit festen Breiten das Problem. Im Theme-Child feste width-Angaben durch max-width: 100% ersetzen und Blöcke im Erlebniswelten-Editor auf „volle Breite/responsiv" stellen.
WooCommerce
Häufige Ursachen: Page-Builder-Sektionen mit fester Breite, große Tabellen oder Slider. Sektionen auf „responsiv"/„volle Breite" stellen, feste Pixel-Breiten im Customizer-CSS durch max-width: 100% ersetzen, Produkttabellen in einen scrollbaren Container legen.
Shopify
Im Theme-Editor Sektionen mit fester Breite auf flexible Layouts umstellen; eigene CSS-Anpassungen mit festen width-Angaben durch max-width: 100% ersetzen und bei 320 px Fensterbreite gegentesten.
WordPress
Feste Breiten in Blöcken, Tabellen oder eigenem CSS durch flexible Angaben ersetzen (max-width: 100%); breite Inhalte wie Tabellen in einen Container mit overflow-x: auto legen.
TYPO3
Im Site-Package-CSS feste width-Angaben durch flexible Layouts (max-width, flex/grid) ersetzen; Inhaltselemente mit fester Breite im Backend auf responsive Varianten umstellen.
Ist deine Website betroffen?
Der kostenlose Schnell-Check prüft bis zu 5 Seiten in wenigen Minuten — ohne Registrierung.
Kostenlosen Schnell-Check starten