Prüfpunkt 1.4.4Stufe AATextgröße, Zoom und Ausrichtung
Zoom-Sperre im Code: warum entfernen, wenn das iPhone trotzdem zoomt?
Weil Ihr iPhone die Sperre nur überspringt. Safari ignoriert sie seit iOS 10, darum fällt sie beim eigenen Test nicht auf. Auf älteren Handybrowsern wirkt sie weiter, und die Testregel des W3C verlangt, dass sie aus dem Code verschwindet. Die Korrektur betrifft eine Zeile. Etwas mehr Arbeit macht nur der Grund, aus dem sie einmal hineinkam.
Die Sperre steht in einer einzigen Zeile
Sie steht im meta-Element viewport im Kopf der Seite. Die Testregel des W3C prüft dort zwei Angaben: user-scalable darf nicht no lauten, und maximum-scale darf nicht unter 2 liegen. Schon maximum-scale=1.5 erfüllt die Anforderung also nicht. Öffnen Sie im Browser den Quelltext der Seite und suchen Sie nach dem Wort viewport. Steht dort eine der beiden Angaben, ist die Anforderung noch offen.
Wen die Sperre noch trifft
Apple schreibt zu Safari 10, dass das Zoomen mit zwei Fingern immer möglich ist und die Einstellung user-scalable ignoriert wird. Das W3C hält fest: Desktop-Browser ignorieren das viewport-Element, die meisten aktuellen Handybrowser ignorieren die Sperre von selbst oder bieten eine Bedienhilfe dafür an. Es bleiben Besucher mit älteren Handybrowsern. Dazu kommen Besucher, deren Browser die Bedienhilfe zwar anbietet, die sie aber nicht kennen. Beide bleiben bei der kleinen Schrift.
Das Formular zoomt beim Antippen: die Lösung ist größere Schrift
Ein Anlass für die Sperre ist das Verhalten von Safari auf iOS: Tippt ein Besucher in ein Eingabefeld, dessen Schrift 15 Pixel oder kleiner ist, vergrößert der Browser die Ansicht auf das Feld. Das stört, und maximum-scale=1 wirkt wie eine schnelle Lösung. Chris Coyier beschreibt 2021 den direkten Weg: Ab 16 Pixel Schrift im Feld bleibt die Ansicht stehen.
Doppeltippen und Karten lassen sich einzeln regeln
Ein weiterer möglicher Anlass ist das Doppeltippen zum Zoomen, wegen dessen Browser einen Klick verzögern. Die Angabe touch-action: manipulation schaltet laut MDN nur das Doppeltippen ab und lässt das Zoomen mit zwei Fingern frei. Eine Karte oder Zeichenfläche regelt ihre Gesten auf dem eigenen Element. Setzen Sie touch-action: none deshalb nie auf die ganze Seite: MDN warnt, dass das Vergrößern dann unmöglich werden kann.
Beispiele
Die Zeile im Kopf der Seite
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="viewport" content="width=device-width, initial-scale=1">Die Anfangsgröße bleibt gleich. Entfallen ist nur die Grenze nach oben.
Zoomen beim Antippen eines Felds
input { font-size: 14px; }input { font-size: 16px; }Ab 16 Pixel zoomt Safari auf iOS beim Antippen nicht mehr in das Feld.
Mehr zu diesem Thema
Weiter im Prüfbereich Barrierefreiheit
- Wie viele meiner Besucher erreicht meine Website nicht?Fast ein Viertel der Erwachsenen in der EU ist im Alltag eingeschränkt. Die Zahlen für Österreich, Deutschland und die EU und was sie für Ihre Website heißen.
- Was bringt Barrierefreiheit meinem Umsatz?Fast jede Startseite hat messbare Fehler, nur 20 von 65 großen deutschen Shops sind per Tastatur bedienbar. Was das für Ihren Umsatz belegt und was nicht.
- Warum ist echter Text auf Websites besser als Text im Bild?Text als Bild lässt sich weder vorlesen noch vergrößern noch von Google durchsuchen. Echter Text kann alles davon und ist leichter zu pflegen.
- Wie bleibt eine Website am Handy ohne seitliches Scrollen lesbar?Inhalte müssen bei 320 Pixel Breite ohne seitliches Scrollen lesbar bleiben. Unser Messkern rendert die Seite in mehreren Breiten und misst den Überlauf.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
