Was es ist
Diese Prüfung schaut sich gezielt an, ob das Viewport-Meta-Tag einer Seite Einstellungen enthält, die das Zoomen deaktivieren – meistens user-scalable=no oder maximum-scale=1, hinzugefügt zu demselben Tag, das ansonsten für mobile Responsivität benötigt wird. Diese Zusätze wurden früher manchmal genutzt, um zu verhindern, dass ein versehentlicher Doppeltipp unerwartet hineinzoomt – haben aber einen gravierenden, ungewollten Nebeneffekt: Sie blockieren das Zoomen komplett, selbst wenn ein Besucher bewusst mit zwei Fingern zoomen möchte.
Das ist etwas anderes als ein komplett fehlendes Viewport-Tag (was ein anderes, rein optisches Problem verursacht, das wir in unseren anderen Viewport-Ratgebern behandeln) – hier geht es speziell um ein Viewport-Tag, das zwar vorhanden ist, aber so konfiguriert wurde, dass es Zoomen aktiv verhindert.
Warum es wichtig ist
Viele sehbehinderte Besucher verlassen sich auf Pinch-Zoom als ihre normale Art, jeglichen Webinhalt bequem zu lesen, und passen die Zoomstufe an das an, was für ihr eigenes Sehvermögen auf einer bestimmten Seite funktioniert. Diese Möglichkeit zu blockieren, ist mehr als nur unbequem – für jemanden, der sie wirklich braucht, kann es den Inhalt einer Seite völlig unlesbar machen, ganz unabhängig davon, wie gut der Rest der Seite gestaltet ist.
WCAG (die Standard-Richtlinien für Barrierefreiheit im Web) verbietet das ausdrücklich, weil es direkt Menschen mit Sehbehinderung betrifft – es gilt als einer der schwerwiegenderen, gut vermeidbaren Fehler bei der Barrierefreiheit, gerade weil dabei eine Fähigkeit weggenommen wird, die der Browser selbst standardmäßig bereits bietet.
So behebst du es
- Prüfe das Viewport-Meta-Tag deiner Seite auf
user-scalable=nooder einenmaximum-scale-Wert von1oder darunter. - Entferne beide dieser Angaben, falls vorhanden, und lasse den Rest des Tags (
width=device-width, initial-scale=1) unverändert. - War das ursprüngliche Ziel, ein versehentliches Doppeltipp-Zoom auf einem bestimmten interaktiven Element zu verhindern, löse das lieber gezielt über CSS für dieses eine Element, statt Zoom für die gesamte Seite zu deaktivieren.
- Nutzt du einen Website-Baukasten, ist das selten eine Standardeinstellung der Plattform – prüfe stattdessen alle benutzerdefinierten Code-Schnipsel, die du in den
<head>-Bereich der Seite eingefügt hast. - Teste anschließend auf einem echten Smartphone, ob sich die Seite jetzt wieder normal per Pinch-Geste zoomen lässt.