Was ist WCAG 1.4.4 Text vergrößern?

Ein Kriterium der Stufe AA, das verlangt, dass Text auf bis zu 200 % skalierbar bleibt und dabei lesbar und bedienbar ist, ohne abgeschnitten zu werden oder zu überlappen.

Wie erfülle ich 1.4.4?

Verwenden Sie relative Einheiten (rem, em, %) und flexible Layouts, damit Text wachsen kann, und vermeiden Sie feste Pixelhöhen an Textcontainern, die Inhalte beim Zoomen abschneiden.

Braucht es ein eigenes Bedienelement für die Schriftgröße?

Nein – der eingebaute Browser-Zoom ist der vorgesehene Mechanismus. Das Kriterium betrifft die Frage, ob Ihr Layout diesen Zoom übersteht, nicht eigene Bedienelemente.

Erfolgskriterien

WCAG 1.4.4 Text vergrößern

Erfolgskriterium 1.4.4 verlangt, dass Text ohne assistive Technologie auf bis zu 200 % seiner Standardgröße vergrößert werden kann, ohne Inhalt oder Funktionalität zu verlieren. Es ist ein Kriterium der Stufe AA unter Richtlinie 1.4 (Unterscheidbar).

Was dies tatsächlich verlangt

Ein Nutzer mit Sehbehinderung muss Text deutlich über seine Standardgröße hinaus vergrößern, um ihn bequem zu lesen. Dieses Kriterium verlangt, dass, wenn er dies tut – über Browser-Zoom, eine Betriebssystem-Textgrößeneinstellung oder (auf Mobilgeräten) Pinch-to-Zoom –, die Seite weiter funktioniert: kein Text wird abgeschnitten oder überlappt, keine Steuerelemente werden unbenutzbar, und entscheidend: Der Nutzer wird nicht gezwungen, horizontal zu scrollen, um jede Zeile einer normalen Lesespalte zu lesen (etwas horizontales Scrollen ist für Dinge wie breite Datentabellen akzeptabel, aber nicht für gewöhnlichen Absatztext).

Wie dies heute am häufigsten scheitert

Auf Mobilgeräten ist der direkteste Verstoß ein Viewport-Meta-Tag, das Zoomen komplett deaktiviert:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Dies blockiert den primären Mechanismus, den mobile Nutzer zum Vergrößern von Text haben, unabhängig davon, wie gut der Rest der Seite Zoom sonst behandeln würde. Siehe Deaktiviertes Heranzoomen für die Lösung – maximum-scale/user-scalable=no vollständig entfernen.

Der subtilere Fehler: Layouts, die unter Zoom brechen

Auch ohne ein zoom-blockierendes Meta-Tag kann eine mit festen Pixelbreiten, absolut positioniertem Text oder Containern, die sich nicht neu anordnen, gebaute Seite dieses Kriterium bei 200 % Zoom dennoch nicht erfüllen – Text kann andere Elemente überlappen, von einem Container mit fester Höhe abgeschnitten werden, oder horizontales Scrollen erzwingen bei etwas, das eine einfache Lesespalte sein sollte. Diese Hälfte des Kriteriums ist weniger mechanisch prüfbar als der Viewport-Meta-Tag-Fehler und profitiert von einem echten manuellen Test: eine echte Seite auf 200 % zoomen und sie von Anfang bis Ende durchlesen.

Verwandt, aber unterschieden: Neuanordnung (1.4.10)

WCAG 2.1 fügte ein verwandtes, strengeres Kriterium hinzu – 1.4.10 Neuanordnung –, das verlangt, dass Inhalt bei 400 % Zoom auf einem 320px breiten Ansichtsfenster funktioniert, ohne gleichzeitig in zwei Dimensionen scrollen zu müssen. Die 200 % von 1.4.4 sind die ältere, engere Anforderung; eine Seite, die 1.4.10 besteht, besteht im Allgemeinen auch 1.4.4, aber das Umgekehrte ist nicht garantiert.

Häufige Fragen

Was ist WCAG 1.4.4 Text vergrößern?: Ein Kriterium der Stufe AA, das verlangt, dass Text auf bis zu 200 % skalierbar bleibt und dabei lesbar und bedienbar ist, ohne abgeschnitten zu werden oder zu überlappen.
Wie erfülle ich 1.4.4?: Verwenden Sie relative Einheiten (rem, em, %) und flexible Layouts, damit Text wachsen kann, und vermeiden Sie feste Pixelhöhen an Textcontainern, die Inhalte beim Zoomen abschneiden.
Braucht es ein eigenes Bedienelement für die Schriftgröße?: Nein – der eingebaute Browser-Zoom ist der vorgesehene Mechanismus. Das Kriterium betrifft die Frage, ob Ihr Layout diesen Zoom übersteht, nicht eigene Bedienelemente.