WCAG 1.4.4 Textgröße ändern

Das Erfolgskriterium 1.4.4 ermöglicht es sehbehinderten Menschen, Text ohne spezielle Software zu vergrößern und die Website trotzdem zu nutzen. Viele ältere Besucher drücken einfach Strg und + oder ziehen auf dem Smartphone mit zwei Fingern auf. Es gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.4.4). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Text lässt sich ohne assistive Technologie bis auf 200 Prozent vergrößern, ohne dass Inhalte oder Funktionen verloren gehen.

• Jeder vom Browser unterstützte Mechanismus zur Textvergrößerung zählt, auch der Zoom der ganzen Seite; eigene „A+“-Buttons brauchen Sie nicht.
• Bei 200 % muss aller Text sichtbar und lesbar bleiben, und alle Funktionen müssen weiter funktionieren: kein abgeschnittener oder überlappender Text, keine Buttons, die aus dem Bildschirm oder hinter andere Elemente geschoben werden.

Ausnahmen: Untertitel und Bilder eines Textes (für Bilder eines Textes siehe 1.4.5).

Typische Fehler in Onlineshops

• das Viewport-Meta-Tag enthält user-scalable=no oder maximum-scale=1, sodass das Zoomen mit zwei Fingern auf Smartphones nicht funktioniert;
• Text in Buttons, Badges oder Tabs wird abgeschnitten, weil ihre Container eine feste Höhe oder Breite haben;
• ein fixierter Header und eine Cookie-Leiste wachsen bei 200 % so stark, dass sie den Großteil des Bildschirms verdecken;
• Dropdown-Menüs oder der Mini-Warenkorb sind bei größerer Schrift nicht mehr erreichbar;
• Schriftgrößen nur in Viewport-Einheiten (vw), sodass Text beim Zoomen nicht mitwächst.

So prüfen Sie es

Automatisch: Unser Checker markiert ein Viewport-Meta-Tag, das den Zoom abschaltet oder unter 2× begrenzt (Regel meta viewport). Ob bei 200 % Inhalte verloren gehen, hängt vom Layout ab und erfordert eine manuelle Prüfung.

Manuell: Zoomen Sie in einem etwa 1280 px breiten Desktop-Browserfenster auf 200 % und gehen Sie die wichtigsten Aufgaben durch: suchen, ein Produkt öffnen, Optionen wählen, in den Warenkorb legen, zur Kasse gehen. Achten Sie auf abgeschnittenen Text, Überlappungen und alles, was Sie nicht erreichen. Prüfen Sie auf dem Smartphone, ob das Zoomen mit zwei Fingern funktioniert. Der reine Text-Zoom (in Firefox „Nur Text zoomen“) ist ein strengerer Zusatztest.

So beheben Sie es

• Entfernen Sie user-scalable=no und maximum-scale aus dem Viewport-Meta-Tag.
• Verwenden Sie relative Einheiten (rem, em) für Schriftgrößen und vermeiden Sie feste Höhen bei Elementen, die Text enthalten.
• Lassen Sie Buttons, Beschriftungen und Badges in zwei Zeilen umbrechen, statt sie abzuschneiden.
• Halten Sie fixierte Header bei hohem Zoom klein oder heben Sie die Fixierung auf niedrigen Bildschirmen auf.

Verwandte Kriterien

• 1.4.10 Umfluss (Reflow) — kein horizontales Scrollen bei 400 % Zoom.
• 1.4.12 Textabstand — größerer Zeilen- und Zeichenabstand ohne Verlust.
• 1.4.5 Bilder eines Textes — Text in Bildern lässt sich schlecht vergrößern.

Häufige Fragen

Reicht der Browser-Zoom, um 1.4.4 zu erfüllen?

Ja, der Seitenzoom des Browsers ist ein anerkannter Weg, Text zu vergrößern. Die Seite muss bei 200 % nutzbar bleiben: kein abgeschnittener Text, keine überlappenden Elemente, keine verdeckten Buttons.

Legen die WCAG eine Mindestschriftgröße fest?

Nein. WCAG 2.2 kennt keine Mindestschriftgröße. 1.4.4 verlangt, dass sich Text auf 200 % vergrößern lässt, und 1.4.3 regelt den Kontrast von Text, unabhängig von seiner Größe.

Ist user-scalable=no ein Verstoß?

Ein Viewport-Meta-Tag, das den Zoom abschaltet oder begrenzt (user-scalable=no oder ein niedriger maximum-scale), hindert mobile Nutzer daran, Text zu vergrößern, und wird unter diesem Kriterium gemeldet.

Wie teste ich WCAG 1.4.4?

Stellen Sie den Browser auf ein 1280 px breites Fenster ein, zoomen Sie auf 200 % und gehen Sie die wichtigsten Seiten und Aufgaben durch. Alles muss lesbar bleiben und funktionieren.