Accessibilité

Pourquoi bloquer le zoom par pincement exclut les visiteurs malvoyants

Un réglage que certains sites utilisent pour paraître 'plus épurés' peut rendre une page totalement illisible pour quelqu'un qui a besoin de zoomer.

Ce que c'est

Cette vérification examine spécifiquement si la balise meta viewport d'une page inclut des réglages qui désactivent le zoom — le plus souvent user-scalable=no ou maximum-scale=1 ajoutés à la même balise par ailleurs nécessaire à l'adaptabilité mobile. Ces ajouts étaient parfois utilisés par le passé pour empêcher un double-tap accidentel de zoomer de façon inattendue, mais ils ont un effet secondaire sérieux et non voulu : ils bloquent le zoom entièrement, même quand un visiteur veut délibérément zoomer par pincement.

C'est différent du simple fait de n'avoir aucune balise viewport (ce qui cause un problème différent, purement visuel, traité dans nos autres guides sur le viewport) — ceci concerne spécifiquement une balise viewport présente mais configurée pour empêcher activement le zoom.

Pourquoi c'est important

De nombreux visiteurs malvoyants comptent sur le zoom par pincement comme leur façon habituelle de lire confortablement n'importe quel contenu web, en ajustant le niveau de zoom à ce qui convient à leur propre vue sur une page donnée. Bloquer cette capacité ne crée pas seulement une gêne — pour quelqu'un qui en a réellement besoin, cela peut rendre le contenu d'une page totalement illisible, point final, quelle que soit la qualité de conception du reste de la page.

Cela est explicitement mentionné dans les WCAG (les directives standard d'accessibilité web), qui exigent que le zoom ne soit pas désactivé précisément à cause de l'impact direct que cela a sur les personnes malvoyantes — c'est considéré comme l'un des échecs d'accessibilité les plus graves et les plus évitables, précisément parce que cela retire une capacité que le navigateur lui-même fournit déjà par défaut.

Comment le corriger

  1. Vérifie la balise meta viewport de ta page pour repérer user-scalable=no ou une valeur de maximum-scale égale ou inférieure à 1.
  2. Supprime ces deux éléments précis s'ils sont présents, en laissant intact le reste de la balise (width=device-width, initial-scale=1).
  3. Si l'objectif initial était d'empêcher un zoom accidentel par double-tap sur un élément interactif précis, résous ce problème avec un style plus ciblé sur cet élément plutôt qu'en désactivant le zoom pour toute la page.
  4. Si tu utilises un créateur de site, ce n'est que rarement un réglage par défaut de la plateforme — vérifie tout extrait de code personnalisé que tu as ajouté à la section <head> de la page.
  5. Teste ensuite sur un vrai téléphone en essayant de zoomer par pincement sur la page pour confirmer qu'elle répond désormais normalement.

Vérifiez si votre propre site a ce problème

Launch Readiness analyse votre site pour détecter ce problème et ~50 autres avant le lancement, en quelques secondes — gratuit, sans inscription.

Lancer une analyse gratuite