Standards · WCAG 2.2

SC 1.4.4 Stufe AA WCAG 2.0

Textgröße ändern

Text muss beim Zoomen auf 200 % lesbar und nutzbar bleiben, ohne dass Inhalte oder Funktionen verloren gehen. Untertitel und Textgrafiken sind ausgenommen.

Was gefordert wird

Wenn Nutzende Text auf 200 % vergrößern — per Browser-Zoom, Betriebssystem-Textskalierung oder Pinch-to-Zoom — muss die Seite weiterhin funktionieren. Kein abgeschnittener Text, keine überlappenden Container, kein Funktionsverlust, kein horizontales Scrollen zum Lesen von Sätzen erforderlich. Das Erfolgskriterium ist älter als 1.4.10 Umfluss, das strenger ist; wer Umfluss erfüllt, erfüllt in der Regel auch 1.4.4 automatisch.

So wird das Erfolgskriterium erfüllt

  • Für Schriftgrößen und Container-Höhen sollten relative Einheiten (rem, em, %) verwendet werden, keine festen Pixelwerte, die nicht mitwachsen können.
  • Feste height-Angaben an Textcontainern sind zu vermeiden — falls nötig, sollte min-height verwendet werden.
  • viewport-Meta-Tags, die den Nutzenden-Zoom deaktivieren (user-scalable=no oder maximum-scale=1), dürfen nicht gesetzt werden.
  • Flexible Layouts (Flexbox, CSS Grid) ermöglichen, dass Container mit ihrem Inhalt wachsen.
  • Bei 200 % Browser-Zoom auf einem typischen Desktop-Viewport sollte geprüft werden, ob Überschriften, Schaltflächen und Formularfelder sich nicht überlappen.

Häufige Fehler

  • <meta name="viewport" content="user-scalable=no"> blockiert den Zoom auf Mobilgeräten — zugleich ein seit Langem bekannter Fehler bei 1.4.4.
  • Schaltflächen mit fester Pixelhöhe, die den Beschriftungstext bei 200 % Zoom abschneiden.
  • Navigationsmenüs, die bei 200 % aus ihrem Container herausragen und nicht mehr erreichbar sind.
  • Modal-Dialoge in Pixelgröße, die ihren Inhalt nach dem Zoomen nicht mehr aufnehmen können.
  • Formular-Beschriftungen, die in den Bereich des nächsten Feldes umbrechen, wenn der Text größer wird.

Warum es wichtig ist

Menschen mit Sehbeeinträchtigungen nutzen routinemäßig 150–200 % Zoom als tägliche Einstellung. Wer 1.4.4 nicht erfüllt, zwingt diese Nutzenden entweder dazu, die Seite nicht lesen zu können, oder auf jeder Zeile horizontal zu scrollen — beides führt zum Abbruch. Die Behebung bedeutet in der Regel die Umstellung von px auf rem in den Design-Tokens des gesamten Projekts, was ein einmaliges Refactoring ist.