Zoom und Textvergrößerung: WCAG-Pflicht

Millionen Menschen nutzen Browser-Zoom täglich – Brillenträger, ältere Nutzer, Menschen mit Augenerkrankungen. Eine Webseite, die bei 200 % Zoom bricht, schließt diese Gruppe aus.

Die WCAG-Anforderungen

1.4.4 Resize Text (Level AA): Text muss auf 200 % vergrößerbar sein, ohne Verlust von Inhalt oder Funktion.
1.4.10 Reflow (Level AA): Inhalt bei 400 % Zoom (= 320px Viewport) ohne horizontales Scrollen.
1.4.12 Text Spacing (Level AA): Nutzer-überschreibbares Zeilenabstand, Buchstabenabstand, Absatzabstand.

Pinch-Zoom auf Mobilgeräten

Smartphone-Nutzer erwarten Pinch-to-Zoom. Das user-scalable=no oder maximum-scale=1 im viewport-Meta-Tag deaktiviert diese Funktion. Ergebnis: sehbehinderte Nutzer können nicht vergrößern. BFSG-kritisch: entferne diese Einstellungen aus allen viewport-Tags.

Was passiert bei 200 % Zoom?

Ideal: Seite reflowt, Text wird größer, Layout passt sich an.
Häufige Probleme: Hauptinhalt wird abgeschnitten, horizontales Scrollen nötig, Buttons überschneiden sich, Navigation verschwindet.
Ursache: fixe Pixel-Größen, starre Layouts, Text in Bildern, overflow:hidden auf Containern.

Test-Anleitung

Desktop: Strg++ (Windows) oder Cmd++ (Mac) bis 200 % oder 400 %. Alles lesbar? Alles erreichbar?
Mobile: Pinch-Geste, bis Text doppelt so groß. Funktioniert das?
DevTools: Responsive-Modus auf 320px stellen (entspricht 400 % auf 1280px).

Best Practices

Relative Einheiten (rem, em, %) statt px für Schriftgrößen. Flexible Layouts (Grid, Flex) statt fester Spaltenbreiten. Medien-Abfragen für kleine Viewports. Kein user-scalable=no im viewport-Meta. Text statt Text-in-Bildern.