Le zoom et l’agrandissement ne doivent pas être désactivés
De nombreux clients malvoyants zooment sur leur téléphone pour lire les prix, les détails des produits et les champs de la commande. Un réglage de la balise meta viewport qui bloque le zoom (user-scalable=no ou maximum-scale=1) rend les petits textes illisibles et peut les empêcher de finaliser un achat.
- Identifiant de la règle
- meta-viewport
- Source
- axe-core 4.13.0
- Impact
- Modéré
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Vérifier que <meta name="viewport"> ne désactive pas l’agrandissement du texte ni le zoom
La règle lit l’attribut content de chaque élément <meta name="viewport"> du document de premier niveau. Les balises viewport situées dans des iframes ne sont pas testées, et une balise dont le content est absent ou vide réussit.
axe-core découpe le contenu aux virgules et aux points-virgules en paires key=value, ignore la casse et les espaces autour des clés et des valeurs, et met la balise en échec dans trois cas :
user-scalable=no- une valeur numérique de
user-scalablesupérieure à -1 et inférieure à 1, commeuser-scalable=0 - un
maximum-scaleinférieur à 2, sachant quemaximum-scale=yesest lu comme 1 et qu’une valeur négative est ignorée
Les autres clés, comme width, initial-scale et minimum-scale, n’entrent pas en jeu. Le message d’échec nomme le réglage qui bloque le zoom.
La règle se contente de lire le balisage et ne zoome pas la page ; elle ne peut donc pas dire si le texte reste lisible à 200 %. Le scanner de Validiscan regroupe les constats par règle, sélecteur et structure du HTML ; la même balise viewport sur toutes les pages d’un thème devient donc un seul constat.
Comment corriger
Supprimez user-scalable=no et toute valeur de maximum-scale inférieure à 2 de la balise <meta name="viewport"> dans le modèle de mise en page ; content="width=device-width, initial-scale=1" suffit.
Critères de succès WCAG
- 1.4.4 Resize Text, niveau AA
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.4.4 | 9.1.4.4 | 9.1.4.4 |
Où une recette corrige le problème
Shopify : recette meta-viewport-zoom
Afficher l’avant et l’après (1)
layout/checkout.liquid Modifications apportées à layout/checkout.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 6 | 6 | <html class="no-js"> | |
| 7 | 7 | <head> | |
| 8 | 8 | <meta charset="utf-8"> | |
| 9 | Supprimée | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 9 | Ajoutée | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 10 | 10 | <meta name="robots" content="noindex"> | |
| 11 | 11 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 12 | 12 | <!-- Checkout assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> |
layout/theme.focused.liquid Modifications apportées à layout/theme.focused.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 10 | 10 | <head> | |
| 11 | 11 | <meta charset="utf-8"> | |
| 12 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 13 | Supprimée | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 13 | Ajoutée | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 14 | 14 | <title></title> | |
| 15 | 15 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 16 | 16 | <!-- Theme assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> |
layout/theme.liquid Modifications apportées à layout/theme.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 11 | 11 | <head> | |
| 12 | 12 | <meta charset="utf-8"> | |
| 13 | 13 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 14 | Supprimée | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 14 | Ajoutée | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 15 | 15 | <meta name="theme-color" content="{{ settings.color_background }}"> | |
| 16 | 16 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 17 | 17 | {%- comment -%} On the live store theme assets load from //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/; the fixture serves them from {{ routes.root_url }}assets/. {%- endcomment %} |
Shopware : recette meta-viewport-zoom
Afficher l’avant et l’après (1)
Resources/views/storefront/layout/meta.html.twig Modifications apportées à Resources/views/storefront/layout/meta.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 6 | 6 | ||
| 7 | 7 | {% block layout_head_meta_tags_viewport %} | |
| 8 | 8 | {# Added by the merchant's agency to stop "zoom jumps" on iOS. #} | |
| 9 | Supprimée | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 9 | Ajoutée | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 10 | 10 | {% endblock %} | |
| 11 | 11 | ||
| 12 | 12 | {% block layout_head_meta_tags_general %} |
WooCommerce : recette meta-viewport-zoom
Afficher l’avant et l’après (1)
header-checkout.php Modifications apportées à header-checkout.php (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 12 | 12 | <head> | |
| 13 | 13 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 14 | 14 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled. ?> | |
| 15 | Supprimée | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 15 | Ajoutée | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 16 | 16 | <?php wp_head(); ?> | |
| 17 | 17 | </head> | |
| 18 | 18 |
header.php Modifications apportées à header.php (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 14 | 14 | <head> | |
| 15 | 15 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 16 | 16 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled ("stops iOS zooming into inputs"). ?> | |
| 17 | Supprimée | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 17 | Ajoutée | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 18 | 18 | <?php wp_head(); ?> | |
| 19 | 19 | </head> | |
| 20 | 20 |
Magento : recette meta-viewport-zoom
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 3 | 3 | <head> | |
| 4 | 4 | <!-- VALIDISCAN-SEEDED meta-viewport: pinch zoom disabled (Luma 2.0-2.3 default kept by the theme). | |
| 5 | 5 | Fixed variant: content="width=device-width, initial-scale=1". --> | |
| 6 | Supprimée | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> | |
| 6 | Ajoutée | <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| 7 | 7 | <meta name="format-detection" content="telephone=no"/> | |
| 8 | 8 | <css src="css/styles-m.css"/> | |
| 9 | 9 | <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet