Was Reflow bei Vergrößerung bedeutet

So funktioniert es

Viele Menschen mit Sehschwäche vergrößern Seiten im Browser stark. Bei 400 % Zoom bleibt auf einem 1280 Pixel breiten Bildschirm Platz für 320 CSS-Pixel, so viel wie auf einem kleinen Smartphone. Eine Seite, die sich anpasst, bricht dann in eine Spalte um, und man liest nur von oben nach unten.

Passt sie sich nicht an, ragt der Inhalt rechts hinaus. Dann muss man für jede Zeile hin- und zurückscrollen und verliert beim Lesen ständig die Stelle.

WCAG 2.2 verlangt in Kriterium 1.4.10, dass Inhalte bei 320 CSS-Pixel Breite ohne waagrechtes Scrollen lesbar und bedienbar bleiben. Ausgenommen sind Inhalte, die eine zweidimensionale Anordnung brauchen, etwa Karten, Diagramme und Datentabellen. bytereport lädt die Seite im Browser mit 320 Pixel Breite und prüft, ob sie breiter wird.

Worauf es ankommt

• Ein responsives Layout mit Viewport-Angabe. Ohne das Viewport-Tag rechnet ein mobiler Browser mit einer breiten Desktop-Seite. Das Layout passt sich über flexible Breiten und Media Queries an.
• Keine festen Breiten. width: 1200px oder ein großes min-width an einem Container erzwingt seitliches Scrollen. max-width statt width lässt Platz zum Schrumpfen.
• Bilder und Videos begrenzen. Ohne Begrenzung behalten sie ihre volle Breite.
• Lange Wörter umbrechen. Lange URLs, E-Mail-Adressen und zusammengesetzte Wörter sprengen schmale Spalten.
• Tabellen und Code in eigenen Rahmen. Breite Tabellen dürfen innerhalb eines eigenen Bereichs scrollen, die Seite selbst nicht.
• Nicht verstecken. overflow-x: hidden am body beseitigt den Scrollbalken, schneidet den Inhalt aber ab, der dann gar nicht mehr erreichbar ist.

img, video { max-width: 100%; height: auto; }
body { overflow-wrap: break-word; }
.table-wrap { overflow-x: auto; }

So richtest du es ein

Das Layout kommt aus dem Theme. Wer es pflegt, sucht das Element, das breiter ist als der Bildschirm: In den Entwicklerwerkzeugen des Browsers stellst du die Breite auf 320 Pixel und scrollst nach rechts, bis du siehst, was hinausragt. Oft ist es ein einzelner Baustein, etwa eine Tabelle aus dem Editor, ein eingebettetes Widget oder ein Bild mit fester Breite. Inhalte aus dem CMS, wie breite Tabellen, packst du dort in einen scrollbaren Block oder teilst sie auf.