1.4.10 Reflow

Inhalte müssen ohne Informationsverlust oder Funktionseinbußen nutzbar sein, wenn der Nutzer bis auf 400 % zoomt, was einem Ansichtsfenster von 320×256 px entspricht (z. B. Smartphone im Hochformat).

Viele Nutzer mit Sehbehinderungen vergrößern Inhalte auf 200–400 % (z. B. mit Strg + oder Lupe).

Reflow bedeutet: Der Inhalt passt sich an die Breite an – wie bei einer mobilen Ansicht – statt horizontales Scrollen zu erfordern.

G206 – Layout bricht automatisch um (Reflow), z. B. durch:

• Flexbox
• CSS Grid
• Media Queries
• Relative Maßeinheiten

Beispiel mit Flexbox

<div class="container">
  <div class="element">Block 1</div>
  <div class="element">Block 2</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.element {
  flex: 1 1 300px;
  min-width: 250px;
}

Bei Verkleinerung passt sich das Layout automatisch an – kein Scrollen erforderlich.

G204 – Inhalte sind ohne horizontales Scrollen bei 320px nutzbar

 

So testest du:

• Setze Browserbreite auf 320px
• Zoom auf 400 % oder nutze Dev-Tools (Viewport: 320×256)
• Prüfe: Muss man seitlich scrollen, um Absätze zu lesen?

Entwickler-Tipps:

• Vermeide feste Breiten in px für Container
• Nutze stattdessen %, em, rem, vw/vh
• Achte auf Bilder und Tabellen – oft sind sie zu breit ohne Medienanpassung

G146 - Verwende Media Queries (@media) für responsives Verhalten
G191 - Stelle sicher, dass Steuerelemente (z. B. Buttons) bei Zoom noch erreichbar sind
G197 - Erlaube Nutzern, Textgröße zu ändern, ohne Layout zu zerstören
G225 - Vermeide horizontales Scrollen bei Textblöcken – Ausnahmen: z. B. Codebeispiele, Tabellen

• Inhalt kann bei 320 px nicht vollständig dargestellt werden (z. B. abgeschnitten)
• Horizontaler Scroll erforderlich, um Absätze zu lesen
• Layout zerbricht bei Zoom (z. B. überlappende Blöcke)
• Buttons oder Menüs sind nicht mehr zugänglich bei starker Vergrößerung