meta-viewport-zoom-enabled
La balise meta viewport ne doit pas désactiver le zoom
Vérifie que <meta name="viewport"> ne définit ni user-scalable=no ni un maximum-scale inférieur à 2 (200 %).
Applicabilité. S’applique aux éléments <meta name="viewport"> dont l’attribut content définit maximum-scale ou user-scalable. Un contenu qui ne définit ni l’un ni l’autre ne peut pas restreindre le zoom.
Attendu. Dans la balise meta viewport en vigueur, la dernière dotée d’un contenu (une balise antérieure est remplacée, et donne lieu à une question si elle restreint le zoom) : user-scalable est absent, vaut yes, device-width, device-height ou un nombre hors de l’intervalle -1 à 1 ; et maximum-scale est absent, vaut device-width, device-height, une valeur négative, ou 2 ou plus. Toute autre valeur empêche l’utilisateur d’agrandir le texte à 200 %, ce qu’exige le critère WCAG 1.4.4 (Redimensionnement du texte).
Ce que rapporte un constat.
reasons: les réglages qui restreignent le zoom, un par élément, écrits comme dans l’attributcontent(user-scalable=no,maximum-scale=1).
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
Un maximum-scale de 5 (500 %) permet encore de zoomer bien au-delà des 200 % exigés par le critère WCAG 1.4.4.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
user-scalable=no désactive entièrement le zoom par pincement.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
VIEWPORT_ZOOM_RESTRICTED_OVERRIDDEN
- Dans le panneau Éléments, trouvez chaque <meta name="viewport"> dans le head de la page et notez lequel est le dernier.
- Ouvrez la page sur un téléphone ou une tablette, ou dans le mode appareil des outils de développement avec l’émulation tactile.
- Pincez pour zoomer (ou utilisez le zoom du navigateur) et essayez d’agrandir le texte à 200 %.
- Si le zoom est bloqué, vérifiez si la page a son propre moyen d’agrandir le texte, comme un réglage de taille du texte. Cela ne compte que s’il est utilisable au clavier, qu’il rend le texte au moins deux fois plus grand et que rien n’est coupé ni perdu.
Réussite. Le texte peut être agrandi à au moins 200 %, ou le réglage de taille du texte propre à la page, utilisable au clavier, l’agrandit à au moins 200 % sans perte de contenu ni de fonction.
Échec. Le zoom est bloqué ou limité à moins de 200 % dans le navigateur testé et la page ne propose aucun moyen propre d’agrandir le texte à 200 %, ce qui ne respecte pas le critère WCAG 1.4.4.