Zoom nicht gesperrt

Was geprüft

Gelesen wird die Angabe <meta name="viewport">. Gemeldet wird, wenn sie das Vergrößern sperrt: user-scalable=no (bzw. 0) oder ein zu kleines maximum-scale. Auffällig ist ein Wert unter 2; empfohlen wird, die Angabe ganz zu streichen oder mindestens 5 zu setzen. Fehlt die Viewport-Angabe ganz, trifft der Punkt nicht zu; das Fehlen bewertet der Punkt „Viewport-Angabe für Mobilgeräte“.

Wie relevant

Hoch, weil eine gesperrte Vergrößerung Menschen mit Sehschwäche auf dem Handy direkt am Lesen hindert und sich mit einer Zeile beheben lässt.

Warum

Viele Menschen vergrößern Text auf dem Handy mit zwei Fingern. Sperrt die Seite das, bleibt kleiner Text unlesbar. Manche Browser ignorieren die Sperre inzwischen, verlassen können Sie sich darauf nicht. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Entfernen Sie user-scalable=no und maximum-scale aus der Viewport-Angabe oder setzen Sie maximum-scale auf mindestens 5. Die übliche Angabe genügt.

Nebenwirkung: Manche Seiten sperren den Zoom, damit iOS beim Fokus auf kleine Eingabefelder nicht hineinzoomt. Das lässt sich ohne Sperre lösen: Eingabefelder mit mindestens 16 px Schriftgröße. Testen Sie Formulare danach auf einem iPhone.

WordPress: Die Viewport-Angabe steht meist in der header.php des Themes oder wird von Theme-Optionen erzeugt. Nach einem Theme-Update kann eine geänderte header.php überschrieben werden; Anpassungen gehören ins Child-Theme.

Codebeispiel

HTML

<!-- vorher: sperrt das Vergrößern -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- nachher -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  /* verhindert das automatische Hineinzoomen in iOS ohne Zoom-Sperre */
  input, select, textarea { font-size: 16px; }
</style>

Weiterführende Quellen

• https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element