Deaktiviertes Heranzoomen: Warum maximum-scale=1 niemals ausgeliefert werden sollte
Pinch-to-Zoom ist eine Kernfunktion der Barrierefreiheit, die in jeden mobilen Browser eingebaut ist – so vergrößert jemand mit Sehbehinderung Text, der sonst zu klein zum Lesen ist, ganz ohne Zutun der Website selbst. Eine kleine Zahl von Viewport-Meta-Tag-Konfigurationen deaktiviert dies vollständig, und jede einzelne davon scheitert an WCAG ohne echten Nutzen.
Dies ist WCAG-Erfolgskriterium 1.4.4 (Text vergrößern), Stufe AA.
Das Fehlermuster
<!-- Deaktiviert Pinch-to-Zoom vollständig -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Sowohl user-scalable=no als auch maximum-scale=1 (oder jeder maximum-scale-Wert, der zu nah an initial-scale liegt) blockieren das Zoomen. Dieses Muster war in der frühen mobilen Webentwicklung verbreitet, um versehentliches Zoomen bei Doppeltipp zu verhindern, geht aber direkt auf Kosten jedes Menschen, der absichtlich zoomen muss.
Die Lösung
Entfernen Sie einfach die zoomdeaktivierenden Parameter:
<!-- Erlaubt Zoomen, setzt weiterhin eine sinnvolle Anfangsskalierung -->
<meta name="viewport" content="width=device-width, initial-scale=1">
Es gibt im Wesentlichen keinen modernen Anwendungsfall, bei dem das Deaktivieren von Zoom die Barrierefreiheitskosten wert wäre – wenn Doppeltipp-zum-Zoomen ein echtes UX-Problem in Ihrer App verursacht (verbreitet bei manchen stark interaktiven App-artigen Oberflächen), besteht die Lösung darin, das konkrete Interaktionsproblem direkt zu adressieren (zum Beispiel über touch-action: manipulation auf den betreffenden Elementen), nicht darin, Zoom website-weit zu deaktivieren.
Warum dies ein so klares Bestehen/Nichtbestehen ist
Anders als die meisten WCAG-Prüfungen gibt es hier keine Grauzone – entweder blockiert das Viewport-Meta-Tag die Skalierung, oder es tut es nicht, und es gibt keinen legitimen Designgrund, sie zu blockieren. Dies ist eine Ein-Zeilen-Lösung in einer einzigen gemeinsamen Vorlage, mit im Wesentlichen keinem Nachteil, und eine der Änderungen mit dem höchsten Hebel bei einer ersten Prüfung für jede mobil-responsive Website, die dieses ältere Muster noch trägt.
Offizielle Referenzen
Häufige Fragen
- Warum sollte man das Zoomen per Fingergeste nie deaktivieren?
- Zoom ist die Art, wie Menschen mit Sehbehinderung Text auf Mobilgeräten vergrößern. `user-scalable=no` oder `maximum-scale=1` entfernt eine wesentliche Funktion der Barrierefreiheit und hat heute keinen legitimen Anwendungsfall.
- Wie behebe ich einen Viewport, der Zoom blockiert?
- Setzen Sie den Viewport auf `width=device-width, initial-scale=1` und entfernen Sie `user-scalable=no` sowie jedes `maximum-scale` unter 2. Responsive Layouts müssen Zoom nie deaktivieren.
- Welches WCAG-Kriterium verletzt deaktivierter Zoom?
- SC 1.4.4 (Textgröße ändern), Stufe AA, und es untergräbt zusätzlich 1.4.10 (Reflow). Text muss sich ohne Verlust von Inhalt oder Funktion auf mindestens 200 % vergrößern lassen.
Verwandte Artikel
Möchten Sie sehen, wie Ihre eigene Website abschneidet?
Kostenlosen Barrierefreiheitsscan durchführen