Kostenloser Scan

6. November 2026

Zoom 200 Prozent und Reflow: WCAG 1.4.4 und 1.4.10 im Vergleich

Zoom 200 Prozent steht für das WCAG-Erfolgskriterium 1.4.4 (Textgröße ändern, Stufe AA): Abgesehen von Untertiteln und Schriftgrafiken muss sich Text ohne assistive Technologien bis auf 200 Prozent vergrößern lassen, ohne Verlust von Inhalt oder Funktionalität. Reflow ist ein eigenes Kriterium, 1.4.10 (Umbruch, Stufe AA): Inhalte müssen sich ohne Verlust von Information oder Funktionalität und ohne Scrollen in zwei Dimensionen darstellen lassen, und zwar bei einer Breite, die 320 CSS-Pixeln entspricht (bzw. bei einer Höhe von 256 CSS-Pixeln für horizontal scrollende Inhalte). Beide helfen Menschen, die Inhalte zum Lesen vergrößern müssen, prüfen aber Unterschiedliches. Dieser Leitfaden stützt sich auf die Understanding-Dokumente des W3C zu WCAG 2.2 und erklärt, was jedes Kriterium verlangt, wie beide zusammenhängen, welche Ausnahmen gelten und welche Fehler dokumentiert sind.

Zoom 200 Prozent: was Kriterium 1.4.4 verlangt

Kriterium 1.4.4 richtet sich vor allem an Menschen mit leichter Sehbeeinträchtigung, die vergrößerten Text ohne Bildschirmlupe lesen können. Es umfasst visuell dargestellten Text, einschließlich Bedienelementen und Beschriftungen aus Text.

Laut W3C ist die Skalierung in erster Linie Aufgabe des User Agents, also des Browsers: Zoom der ganzen Seite, Vergrößerung, reine Textvergrößerung oder eine vom Nutzer eingestellte Textgröße. Aufgabe der Autorinnen und Autoren ist es, Inhalte so zu erstellen, dass sie den Browser nicht daran hindern, sie wirksam zu skalieren. Inhalte erfüllen das Kriterium, wenn sie sich mit mindestens einem von User Agents unterstützten Mechanismus zur Textskalierung auf 200 % vergrößern lassen.

Zwei Punkte sind in der Praxis wichtig. Erstens bedeutet 200 % bis zur doppelten Breite und Höhe. Zweitens darf es, wenn der Mechanismus Zwischenstufen zwischen 100 % und 200 % anbietet, auch auf diesen Stufen keinen Verlust von Inhalt oder Funktionalität geben. Ein Test nur bei 200 % genügt also nicht.

Reflow bei 320 CSS-Pixeln: was Kriterium 1.4.10 verlangt

Kriterium 1.4.10 verlangt, dass Inhalte ohne Verlust von Information oder Funktionalität und ohne Scrollen in zwei Dimensionen dargestellt werden können: vertikal scrollende Inhalte bei einer Breite, die 320 CSS-Pixeln entspricht, horizontal scrollende Inhalte bei einer Höhe, die 256 CSS-Pixeln entspricht. Bei horizontal geschriebenen Sprachen (von links nach rechts oder von rechts nach links) bricht der Text innerhalb der Breite des Viewports um, bei vertikal geschriebenen Sprachen innerhalb seiner Höhe.

Das Problem ist konkret: Laufen Zeilen über den Rand des Viewports hinaus, muss eine Person, die den Inhalt vergrößert hat, für jede Zeile hin und her scrollen. Sie verliert die Stelle, an der sie gerade liest, und der Aufwand steigt. Das W3C weist darauf hin, dass Reflow auch Menschen mit Mobilgeräten und Menschen hilft, die auf großen Bildschirmen zoomen.

Warum 320 px? Laut Anmerkung zum Kriterium entsprechen 320 CSS-Pixel einem anfänglichen Viewport von 1280 CSS-Pixeln Breite bei 400 % Zoom. Das W3C betont, dass sich die 400 % auf jede Dimension beziehen, nicht auf die Fläche. Der Wert entsprach außerdem kleinen mobilen Viewports zur Zeit der Entstehung des Kriteriums. In der Praxis beanspruchen Scrollleiste und Browseroberfläche Platz: Auf einem Bildschirm mit 1280 × 1024 bei 400 % misst der nutzbare Viewport 318 × 236 Pixel.

Unterschied zwischen Zoom 200 Prozent und Reflow

Nach Angaben des W3C überschneidet sich Kriterium 1.4.4 mit dem Ziel von Reflow: Es sollte möglich sein, den gesamten Text auf mindestens 200 % zu vergrößern und dabei 1.4.10 zu erfüllen. Reflow selbst verlangt dagegen keine bestimmte Textvergrößerung. Die beiden Kriterien ergänzen sich, ersetzen einander aber nicht.

Responsive Websites zeigen, wie beide zusammenwirken. Kriterium 1.4.4 gilt für jede Layoutvariante. Das W3C nennt als Beispiel 20 px große Schrift in einem 1280 px breiten Fenster: Nach einem Zoom auf 400 % bricht die Seite in einen Viewport von 320 CSS-Pixeln um, und die Autorin oder der Autor kann die Schrift auf 10 px setzen. Dieser Text wird weiterhin doppelt so groß angezeigt wie mit der Standardeinstellung des Browsers bei 100 % Zoom, obwohl seine CSS-Größe halbiert wurde. Es ist nicht erforderlich, die 200 % Textvergrößerung innerhalb eines bestimmten Breakpoints zu erreichen.

Die wichtigsten Ausnahmen

Kriterium 1.4.10 nimmt Teile des Inhalts aus, die für Nutzung oder Bedeutung ein zweidimensionales Layout benötigen. Die Anmerkung zum Kriterium nennt für das Verständnis nötige Bilder (etwa Karten und Diagramme), Videos, Spiele, Präsentationen, Datentabellen (nicht einzelne Zellen) und Oberflächen, bei denen Werkzeugleisten beim Bearbeiten des Inhalts sichtbar bleiben müssen. Für diese Teile ist Scrollen in zwei Dimensionen zulässig.

Die Ausnahme gilt nur für den betroffenen Abschnitt und erstreckt sich nicht automatisch auf andere Inhalte. Rund um eine Datentabelle in einem eigenen scrollbaren Container müssen Überschriften, Suchfelder, Paginierung und allgemein der übrige Inhalt weiterhin umbrechen. Scrollleisten in beide Richtungen auf Seitenebene, die durch ausgenommene Inhalte entstehen, können zulässig sein, wenn der übrige Inhalt nur in eine Richtung scrollt; besser ist es jedoch, zweidimensionales Scrollen auf den Abschnitt zu beschränken, der es braucht. So verhindert zum Beispiel max-width: 100% bei einem Video eine unnötige Scrollleiste.

Dokumentierte Fehler bei Zoom 200 Prozent und Reflow

Die Understanding-Dokumente zu den Kriterien 1.4.4 und 1.4.10 führen vier Fehler auf (F69, F80, F94 und F102). Dazu kommen Prüfpunkte aus den Testregeln und Empfehlungen des W3C, die selbst keine gelisteten Fehler sind.

Beheben: vom W3C empfohlene Techniken

Für 1.4.4 gehören zu den hinreichenden Techniken: eine Technologie, deren gängige User Agents Zoom unterstützen, ein flüssiges Layout sowie Textcontainer, die mit dem Text mitwachsen (Container in em, Schriftgrößen in Prozent, als benannte Größen oder in em, Größen und Positionen, die mit der Textgröße skalieren). Ein weiterer Weg sind Bedienelemente auf der Seite, die den gesamten Text schrittweise auf bis zu 200 % vergrößern, oder die Sicherstellung, dass kein Inhalt verloren geht, wenn der Text wächst, während die Container ihre Breite behalten.

Für 1.4.10 nennt das W3C Flexbox zum Umbrechen von Inhalten, Media Queries und CSS Grid zum Umbrechen von Spalten, den Umgang mit langen URLs und Zeichenketten sowie width, max-width und Flexbox, um Beschriftungen und Eingabefelder einzupassen. Als empfohlene Zusatztechniken erwähnt es Media Queries, um fixierte Kopf- und Fußzeilen zu lösen, sowie max-width und height, um Bilder einzupassen. Für lange Zeichenketten wie Authentifizierungsschlüssel wird eine gekürzte Anzeige mit Link oder Aufklappmechanismus als Beispiel genannt.

Konkret kann die Hauptnavigation zuerst in ein Menü „Mehr“ und dann in einen Hamburger-Button zusammenklappen, ohne Funktionsverlust und ohne horizontales Scrollen. Eine Artikelseite kann sich zu einer einzigen Spalte stapeln, die in 320 px passt. Nicht alles muss gestapelt werden: Jeder Abschnitt muss lediglich ohne Scrollen in zwei Dimensionen lesbar sein. Das folgende, für diesen Artikel erstellte Codebeispiel veranschaulicht diese Prinzipien.

<!-- Zoom nicht blockieren -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  /* Relative Größen: Text folgt der Nutzereinstellung */
  body { font-size: 100%; }
  .hinweis { padding: 1em; min-height: 3em; } /* keine feste Höhe in px */

  /* Umbruch mit Flexbox */
  .karten { display: flex; flex-wrap: wrap; gap: 1em; }

  /* Medien im Viewport halten */
  img, video { max-width: 100%; height: auto; }

  /* In kleinen Viewports ist der Header nicht mehr fixiert */
  @media (max-width: 30em) {
    header { position: static; }
  }
</style>

Zoom 200 Prozent und Reflow Schritt für Schritt testen

Ein manueller Test bildet die vom W3C beschriebenen Situationen nach. Ergänzen Sie ihn durch eine kontinuierliche Überwachung, um Regressionen durch Template-Updates zu erkennen.

Häufige Fragen

Welches WCAG-Kriterium regelt den Zoom auf 200 Prozent?

Das Erfolgskriterium 1.4.4 Textgröße ändern, Stufe AA. Es verlangt, dass sich Text, abgesehen von Untertiteln und Schriftgrafiken, ohne assistive Technologien bis auf 200 Prozent vergrößern lässt, ohne Verlust von Inhalt oder Funktionalität.

Was ist der Unterschied zwischen Zoom 200 % und Reflow?

1.4.4 betrifft die Vergrößerung von Text auf bis zu 200 %. 1.4.10 betrifft die Darstellung von Inhalten ohne Verlust von Information oder Funktionalität und ohne Scrollen in zwei Dimensionen bei einer Breite von 320 CSS-Pixeln (bzw. einer Höhe von 256 CSS-Pixeln für horizontal scrollende Inhalte). Laut W3C sollte sich der gesamte Text auf mindestens 200 % vergrößern lassen, während Reflow erfüllt bleibt, Reflow selbst verlangt aber keine bestimmte Vergrößerung.

Warum wird Barrierefreiheit bei 320 px Breite getestet?

Weil 320 CSS-Pixel einem 1280 CSS-Pixel breiten Viewport bei 400 % Zoom entsprechen und zur Zeit der Entstehung von Kriterium 1.4.10 kleinen mobilen Viewports entsprachen.

Darf eine Datentabelle horizontal scrollen?

Ja. Datentabellen gehören zu den Inhalten, die ein zweidimensionales Layout benötigen. Einzelne Zellen müssen jedoch umbrechen, und der Inhalt rund um die Tabelle (Überschriften, Suchfelder, Paginierung und der übrige Inhalt) ist nicht ausgenommen.

Muss der 200-%-Zoom innerhalb eines Breakpoints funktionieren?

Nein. Das W3C stellt klar, dass die 200 % Textvergrößerung nicht innerhalb eines bestimmten Breakpoints erreicht werden müssen; das Kriterium gilt für jede Layoutvariante.

Müssen Schriftgrafiken den Test mit 200 Prozent Zoom bestehen?

Sie sind wie Untertitel von Kriterium 1.4.4 ausgenommen. Das W3C schlägt dennoch vor, wo immer möglich echten Text zu verwenden, weil Schriftgrafiken beim Vergrößern verpixeln und ihr Kontrast schwerer anzupassen ist.

Weiterlesen bei Conformly

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.