UX / UI Impact élevé Facile 2 minutes

Zoom de page bloqué

N’empêchez jamais l’utilisateur de zoomer sur la page.

Ce que c’est

Certains sites désactivent le zoom dans la méta de la fenêtre d'affichage via user-scalable=no ou maximum-scale=1. L'utilisateur ne peut alors pas « pincer » pour étirer la page.

Pourquoi c’est important

La désactivation du zoom constitue un grave problème d'accessibilité : les personnes malvoyantes doivent zoomer sur le contenu. Il s'agit d'une violation des WCAG et nuit directement à la convivialité sur mobile. Cela n’apporte aucun réel avantage.

Comment faire

1Supprimez user-scalable=no et maximum-scale de la balise méta de la fenêtre d'affichage.
2Conservez uniquement "width=device-width, initial-scale=1".
3Si le zoom "casse" la mise en page, corrigez-le avec du CSS réactif, et non en désactivant le zoom.

Exemple

Incorrect

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Correct

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

Conclusion

Ne désactivez jamais le zoom : il s'agit d'une solution de deux minutes ayant un impact direct sur l'accessibilité. Supprimez user-scalable=no et maximum-scale et laissez les utilisateurs zoomer. Il fait partie des victoires UX rapides et importantes.

Sujets liés