WCAG 1.4.4: Textgröße ändern

Text muss sich – ohne assistive Technologie – auf 200 % vergrößern lassen, ohne Verlust von Inhalt oder Funktionalität: nichts abgeschnitten, nichts überlappt, alles bedienbar. Ausgenommen sind Untertitel und Bilder von Text. (Englisch: Resize Text.)

Was verlangt das Kriterium?

Zoomen ist die niederschwelligste aller Sehhilfen – jede Nutzerin hat sie im Browser dabei. Das Kriterium stellt sicher, dass die Seite dabei mitspielt: Bei 200 % Vergrößerung (Browser-Zoom oder Textgrößen-Einstellung) darf nichts Wichtiges verschwinden. Es ist der kleine Bruder von 1.4.10 Reflow, das bei 400 % zusätzlich das einspaltige Umbrechen verlangt.

Wen betrifft es besonders?

Die große, leise Gruppe der Vergrößerungs-Nutzer: von der Lesebrillen-Generation bis zur diagnostizierten Sehbehinderung. Auf dem Smartphone zusätzlich alle, die per Pinch-Zoom lesen wollen.

Richtig & falsch im Code

<!-- Falsch: Pinch-Zoom auf Mobilgeräten verboten -->
<meta name="viewport"
      content="width=device-width, user-scalable=no, maximum-scale=1" />

<!-- Richtig: Zoom bleibt erlaubt -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

/* Falsch: feste Höhen kappen vergrößerten Text */
.teaser { height: 120px; overflow: hidden; font-size: 14px; }

/* Richtig: relative Größen, Höhe wächst mit dem Inhalt */
.teaser { min-height: 7.5rem; font-size: 0.875rem; }

Die Grundregeln: Schriftgrößen in rem/em statt px (damit auch die Textgrößen-Einstellung des Browsers greift), keine festen Höhen um Textcontainer, min-height statt height, und den Viewport nie einsperren.

So testest du es

1. Browser-Zoom auf 200 % (Strg/Cmd + +): alle Kernseiten und -abläufe durchspielen – nichts abgeschnitten, nichts überlappend, alle Buttons erreichbar?
2. Textgrößen-Test: Im Browser die Standardschriftgröße auf „Sehr groß“ stellen – reagiert die Seite überhaupt? (Wenn nicht: px-Schriftgrößen.)
3. Mobil: Pinch-Zoom möglich? (axe meldet meta-viewport-Verstöße.)

Verwandte Themen

• 1.4.10 Reflow – die 400-%-Stufe mit Umbruch-Pflicht
• 1.4.12 Textabstände – Robustheit gegen Abstands-Anpassungen
• Reflow, Zoom & Textabstände – alle drei Kriterien in der Praxis