Die Regel meta-viewport meldet ein Viewport-Meta-Tag, das das Zoomen auf Smartphone oder Tablet verhindert – mit user-scalable=no oder einem maximum-scale unter 2. Menschen mit Sehbehinderung können Text dann nicht vergrößern. Die Lösung ist eine Zeile: <meta name="viewport" content="width=device-width, initial-scale=1">, ohne Zoom-Sperre.
Was die Regel bedeutet
WCAG 1.4.4 Textgröße ändern verlangt, dass sich Text ohne assistive Technik auf 200 % vergrößern lässt, ohne dass Inhalte oder Funktionen verloren gehen. Auf Mobilgeräten ist das Zoomen mit zwei Fingern der eingebaute Weg dafür – und das Viewport-Meta-Tag kann ihn abschalten.
axe-core liest den content von <meta name="viewport"> im Hauptdokument und schlägt an, wenn er Folgendes enthält:
user-scalable=nooder einen Zahlenwert füruser-scalablezwischen -1 und 1, etwauser-scalable=0;maximum-scaleunter 2, etwamaximum-scale=1odermaximum-scale=1.5.maximum-scale=yeswertet axe wie 1.
Die Regel ist erfüllt, wenn nichts eingeschränkt ist – und auch, wenn es gar kein Viewport-Tag gibt, denn dann sperrt nichts den Zoom. Ein maximum-scale von genau 2 besteht die Regel, lässt aber alle im Stich, die mehr als 200 % brauchen. Besser lassen Sie die Angabe ganz weg.
Was die Regel nicht prüft: ob der Text bei 200 % tatsächlich lesbar und vollständig bleibt – das ist die eigentliche Anforderung von 1.4.4. Das muss ein Mensch prüfen.
Wen es betrifft
Menschen mit Sehbehinderung, die auf dem Smartphone durch Zoomen lesen, ältere Menschen mit nachlassender Nahsicht und alle, die Kleingedrucktes bei schlechtem Licht lesen. Safari auf iOS ignoriert user-scalable=no seit iOS 10, andere mobile Browser halten sich aber weiterhin daran – es sei denn, man kennt eine Einstellung, die das aufhebt. Für alle anderen bleibt eine Seite mit Zoom-Sperre in der Größe, die das Design vorgibt.
Warum die Prüfung anschlägt
- Alte Mobil-Templates und Frameworks, die
maximum-scale=1, user-scalable=noals Standard mitbrachten, damit sich Seiten „wie eine App“ anfühlen. - iOS soll nicht in Formularfelder zoomen. Safari zoomt hinein, wenn die Schrift eines Eingabefelds kleiner als 16 px ist; den Zoom für die ganze Seite zu sperren, ist eine verbreitete, aber falsche Abhilfe.
- Karten, Karussells und Spiele, deren eigene Wisch- oder Zoomgesten mit dem Seitenzoom kollidieren.
- Hybrid-Apps und Web-Views, deren HTML unverändert auf die öffentliche Website übernommen wurde.
- Snippets aus alten Tutorials, die in den
<head>eines Themes kopiert wurden.
So beheben Sie es
- Suchen Sie das Viewport-Tag im Basis-Template, im Theme oder in der Framework-Konfiguration.
- Entfernen Sie
user-scalable=nound jedesmaximum-scale. Behalten Siewidth=device-width, initial-scale=1. - Haben Sie den Zoom wegen der Formularfelder auf iOS gesperrt, geben Sie Eingabefeldern stattdessen mindestens 16 px Schriftgröße.
- Braucht eine Karte oder ein Canvas eigene Gesten, behandeln Sie diese an genau diesem Element (etwa mit der CSS-Eigenschaft
touch-action), statt den Zoom für die ganze Seite abzuschalten.
<!-- Vorher: Zoom gleich doppelt abgeschaltet -->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Fahrplan – Beispiel-Reederei</title>
</head>
<body>
<main><h1>Fahrplan</h1></main>
</body>
</html><!-- Nachher: responsives Layout, Zoom bleibt den Menschen überlassen -->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fahrplan – Beispiel-Reederei</title>
</head>
<body>
<main><h1>Fahrplan</h1></main>
</body>
</html>Das Hineinzoomen in Formularfelder auf iOS lösen Sie über die Schriftgröße, nicht über das Viewport-Tag:
/* 16 px oder mehr: Safari auf iOS zoomt beim Fokus nicht mehr hinein */
input, select, textarea { font-size: 1rem; }So prüfen Sie es von Hand
- Öffnen Sie den Seitenquelltext und lesen Sie den
contentvon<meta name="viewport">. - Öffnen Sie die Seite auf dem Smartphone und zoomen Sie mit zwei Fingern. Probieren Sie mehr als einen Browser, denn Safari auf iOS ignoriert die Sperre und kann das Problem verdecken.
- Für 1.4.4 selbst: Zoomen Sie im Desktop-Browser auf 200 % (Strg/Cmd und +) und prüfen Sie, dass kein Text abgeschnitten, überlagert oder verdeckt wird und jede Funktion weiter funktioniert.
- Prüfen Sie auch den reinen Textzoom, wenn Ihr Browser ihn anbietet (Firefox: Ansicht → Zoom → Nur Text zoomen) – feste Höhen brechen dort oft zuerst.
Zugehöriges WCAG-Kriterium
1.4.4 Textgröße ändern, Stufe AA. Verwandt: 1.4.10 Reflow (Umbruch), das eine Darstellung bei 320 CSS-Pixel Breite ohne Scrollen in zwei Richtungen verlangt, und 1.4.12 Textabstand.
So meldet Reviseberg diese Regel
Reviseberg führt meta-viewport auf jeder gecrawlten Seite bei 1280 px und noch einmal bei 360 px aus. Das Tag ist bei beiden Breiten dasselbe, und ein Befund aus beiden Durchläufen zählt nur einmal. Weil das Tag im Template steht, erscheint der Befund meist auf allen Seiten. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium 1.4.4 und Stufe, der Zahl der Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der HTML-Ausschnitt mit dem genauen content-Wert und alle betroffenen Seiten. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.
Eine Seite ganz ohne Viewport-Tag besteht diese Regel; das separate SEO-Modul von Reviseberg meldet ein fehlendes Viewport-Tag mit eigenem Score. Und ein sauberes Ergebnis entscheidet 1.4.4 nicht: Ob sich Text ohne Verlust vergrößern lässt, muss ein Mensch prüfen. Das Kriterium bleibt deshalb „ungeprüft“, bis ein manuelles Ergebnis erfasst ist.