Layoutbreite und Startzoom festlegen
Der Viewport Meta-Tag steht im <head> einer HTML-Seite. Für eine responsive Website eignet sich diese Ausgangskonfiguration:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width richtet die Layoutbreite an der Gerätebreite in CSS-Pixeln aus. initial-scale=1.0 setzt den anfänglichen Zoomfaktor auf 1. Ohne passende Angabe können mobile Browser einen breiten virtuellen Viewport verwenden und die Seite verkleinert darstellen. Die MDN-Dokumentation zum Viewport erklärt die Direktiven und ihre Wirkung.
Das Tag ergänzt responsives CSS. Bilder mit fester Überbreite oder unflexible Spalten können weiterhin horizontales Scrollen verursachen. Prüfe deshalb die gerenderte Seite auf einem schmalen Bildschirm.
Zoomgrenzen vermeiden
maximum-scale begrenzt den Zoom, soweit der Browser diese Angabe berücksichtigt. Bei einem Startzoom von 1 würde maximum-scale=2 eine Vergrößerung bis zum Zweifachen erlauben; maximum-scale=5 bis zum Fünffachen. user-scalable=no fordert den Browser auf, das Zoomen zu unterbinden. Browser und Nutzereinstellungen können diese Vorgaben übergehen.
Lass beide Einschränkungen weg, wenn du sie nicht für einen begründeten Sonderfall brauchst. So setzt deine Seite selbst keine solche Zoomgrenze. Wie weit sich Inhalte vergrößern lassen und dabei nutzbar bleiben, musst du im Browser prüfen.
200 Prozent Textvergrößerung richtig einordnen
Das WCAG-Erfolgskriterium 1.4.4 auf Stufe AA verlangt, dass sich Text ohne assistive Technik auf bis zu 200 Prozent vergrößern lässt, ohne Inhalt oder Funktion zu verlieren. Ausgenommen sind Untertitel und Bilder von Text. Auch die Zwischenstufen bis 200 Prozent müssen funktionieren.
Das Kriterium schreibt keinen Wert maximum-scale=5 vor. ClariSEO meldet im Quelltext einen Wert unter 5 als Hinweis auf eine Zoombegrenzung. Dieser Prüfwert geht über die Zahl aus Erfolgskriterium 1.4.4 hinaus. Aus dem Meta-Tag allein lässt sich weder die Erfüllung noch das Verfehlen des gesamten Kriteriums ableiten: Dafür zählen auch verfügbare Vergrößerungsmechanismen und das Verhalten der Inhalte.
Beispiel: Ein Formular erlaubt 200 Prozent Zoom, schneidet dabei aber den Text des Absende-Buttons ab. Die erlaubte Vergrößerung behebt den Darstellungsfehler nicht. Umgekehrt beweist ein fehlendes Zoomlimit noch nicht, dass alle Beschriftungen lesbar bleiben.
Schmale Ansichten und Textvergrößerung prüfen
Das separate WCAG-Erfolgskriterium 1.4.10 „Reflow“ betrifft die Anpassung des Layouts. Bei vertikal laufenden Inhalten sollen 320 CSS-Pixel Breite ausreichen, ohne Informationen oder Funktionen zu verlieren und ohne in zwei Richtungen scrollen zu müssen. Ausnahmen gelten für Inhalte, die für ihre Bedeutung oder Bedienung ein zweidimensionales Layout brauchen, etwa bestimmte Tabellen. 400 Prozent Browserzoom bei ursprünglich 1280 CSS-Pixeln Breite ist ein typischer Prüfaufbau dafür.
Prüfe deine Seite in mehreren Schritten:
- Vergrößere den Text beziehungsweise die Seite schrittweise bis auf 200 Prozent. Achte auf abgeschnittene Texte und überlagerte Bedienelemente.
- Teste eine schmale Ansicht mit 320 CSS-Pixeln Breite. Lies die Inhalte und bediene Navigation und Formulare.
- Kontrolliere auf einem Mobilgerät, ob du weiter hineinzoomen kannst. Teste auch eingeblendete Dialoge und Fehlermeldungen.
Mobile Darstellung und Suchmaschinen
Google verwendet für die Indexierung die mobile Fassung einer Website. Die Hinweise zu Mobile-First-Indexing empfehlen unter anderem gleichwertige Inhalte und Metadaten auf mobiler und Desktop-Ansicht. Der Viewport ist ein Teil der mobilen Umsetzung; ein einzelner Tag garantiert weder ein bestimmtes Ranking noch Barrierefreiheit.
Wenn ClariSEO einen fehlenden oder leeren Viewport meldet, ergänze die Ausgangskonfiguration und prüfe anschließend das Layout. Meldet der Report eine Zoomgrenze, entferne die einschränkende Direktive und wiederhole die Vergrößerungstests.