html-einfach.de

WCAG & BFSG · WCAG in der Praxis

Reflow, Zoom & Textabstände

Von Zuletzt geändert am

Nicht alle lesen mit Standardgröße. Viele zoomen, vergrößern die Schrift oder erzwingen größere Abstände. Drei WCAG-Kriterien stellen sicher, dass dabei nichts zerbricht – und es sind genau die, die in Audits gern auffallen.

1.4.4 Textgröße ändern (AA)

Text muss sich auf 200 % vergrößern lassen, ohne dass Inhalt oder Funktion verloren geht. Der Schlüssel: relative Einheiten statt fester Pixel.

/* Skaliert mit der Nutzereinstellung */
body { font-size: 1rem; }
h1   { font-size: 2rem; }

/* Bremst den Zoom aus – vermeiden */
body { font-size: 16px; }

Wer durchgängig rem/em nutzt, hat dieses Kriterium praktisch geschenkt.

1.4.10 Reflow (AA)

Inhalt muss sich auf eine Breite von 320 CSS-Pixeln umbrechen lassen, ohne Scrollen in zwei Richtungen (entspricht 400 % Zoom auf einem 1280-px-Bildschirm). Praktisch heißt das: ein responsives, einspaltiges Layout, in dem nichts horizontal überläuft.

  • Flexible Layouts (Flexbox, Grid), die umbrechen.
  • Keine festen Breiten in Pixeln für Inhaltscontainer.
  • Ausnahme nur, wo zweidimensionales Scrollen unvermeidlich ist (große Tabellen, Karten).

Randnotiz – Lesefluss nicht künstlich einengen. Reflow heißt umbrechen, nicht einsperren. Text in eine sehr schmale feste Spalte zu zwängen, schadet beim Zoom mehr, als es nützt. Lass Inhalte die verfügbare Breite nutzen und über die Viewport-Breite atmen.

1.4.12 Textabstände (AA)

Setzt eine Nutzerin per eigenem Stylesheet größere Abstände, darf nichts abgeschnitten werden oder überlappen. Konkret muss deine Seite das hier aushalten:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

Der häufigste Bruch: Text in Boxen mit fester Höhe. Lass Container mit dem Inhalt wachsen (min-height statt height, kein overflow: hidden über Text).

Häufige Fehler

  • Schriftgrößen in px, die den Zoom aushebeln.
  • Feste Pixelbreiten für Inhaltscontainer → horizontales Scrollen.
  • Feste Höhen mit overflow: hidden, die bei mehr Abstand Text abschneiden.
  • user-scalable=no im Viewport-Meta – sperrt das Pinch-Zoom aus (ein klassischer Verstoß).
  • Text in Bildern, der sich gar nicht skalieren lässt.

Häufige Fragen

Ist Browser-Zoom dasselbe wie „Textgröße ändern“?

Nicht ganz. 1.4.4 zielt auf das reine Vergrößern des Textes, 1.4.10 (Reflow) auf den Seiten-Zoom bis 400 %. Ein gutes responsives Layout deckt beides ab.

Muss ich das Nutzer-Stylesheet aus 1.4.12 einbauen?

Nein. Es ist ein Test: Deine Seite muss diese Werte vertragen, nicht selbst setzen. Prüfe mit einem Bookmarklet oder den DevTools.

Darf ich Pinch-Zoom je deaktivieren?

Nein. maximum-scale=1 oder user-scalable=no sperren Menschen mit Sehschwäche aus und verstoßen gegen die WCAG.

Fazit

Drei Kriterien sichern die Anpassbarkeit: Text auf 200 % (1.4.4), Reflow auf 320 px ohne 2D-Scrollen (1.4.10) und Robustheit gegen größere Textabstände (1.4.12). Die Mittel sind durchweg gutes responsives Handwerk – relative Einheiten, flexible Layouts, mitwachsende Container – und kein gesperrtes Pinch-Zoom. Das passt zur Haltung, Text nicht künstlich zu verengen.