1.4.4 Textgröße ändern

Was bedeutet das?

Viele Menschen vergrößern Seiten mit der Zoomfunktion des Browsers oder stellen eine größere Standardschrift ein. Bei 200 % muss dann noch alles lesbar und bedienbar sein: kein abgeschnittener Text, keine überlappenden Bereiche, keine Buttons, die aus dem Bild rutschen.

Verhindern Sie das Zoomen nicht, etwa mit user-scalable=no. Verwenden Sie für Schriftgrößen relative Einheiten wie rem und vermeiden Sie feste Höhen für Kästen mit Text. Ausgenommen sind Untertitel und Bilder von Text.

Wem hilft das?

• Menschen mit Sehbehinderung
• Ältere Menschen
• Menschen, die auf kleinen Bildschirmen lesen

Typische Fehler

• Viewport-Angabe mit user-scalable=no oder maximum-scale=1, die das Zoomen auf Mobilgeräten sperrt
• Kästen mit fester Höhe in Pixeln, aus denen vergrößerter Text herausläuft oder abgeschnitten wird
• Navigation, deren Einträge bei Vergrößerung hinter anderen Elementen verschwinden

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Ist bei 200 % Zoom aller Inhalt und jede Funktion ohne Verlust vorhanden (siehe Screenshot)?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<meta name="viewport" content="width=device-width, user-scalable=no">
<style>.teaser { height: 120px; overflow: hidden; font-size: 14px; }</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>.teaser { min-height: 7.5rem; font-size: 0.875rem; }</style>

Zoomen ist erlaubt, und der Kasten wächst mit dem Text, statt ihn abzuschneiden.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.4 Resize Text