Les utilisateurs devraient pouvoir zoomer et agrandir le texte jusqu’à 500 %
Certains clients malvoyants doivent zoomer bien au-delà du double de la taille pour lire le texte des produits sur un téléphone. Une limite maximum-scale inférieure à 5 restreint l’agrandissement des prix, des descriptions et des champs de formulaire.
- Identifiant de la règle
- meta-viewport-large
- Source
- axe-core 4.13.0
- Impact
- Mineur
- 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"> permet un agrandissement important
Seules les balises viewport du document de premier niveau sont contrôlées ; une balise placée dans un iframe est ignorée. Pour cette règle, axe-core désactive son filtre de visibilité habituel : la balise est donc testée bien que rien ne l’affiche. Quand l’attribut content est absent ou vide, la balise réussit.
La valeur de content est découpée en paires key=value à chaque virgule et à chaque point-virgule ; clés et valeurs sont comparées en minuscules, une fois retirés les espaces qui les entourent. Ici, seul maximum-scale est déterminant : une valeur supérieure ou égale à 2 et inférieure à 5 échoue, par exemple maximum-scale=3. Un maximum-scale négatif est écarté, et maximum-scale=yes est lu comme 1.
Un maximum-scale non négatif inférieur à 2 satisfait à cette règle, tout comme user-scalable=no. Tous deux échouent en revanche à la règle distincte meta-viewport, que le scanner de Validiscan exécute dans sa passe de conformité WCAG.
Le scanner exécute cette règle dans sa passe de bonne pratique, n’enregistre que les échecs et les exclut de l’avancement des corrections. Seul le balisage est lu : la règle ne peut donc pas dire si une page reste utilisable avec un zoom important.
Comment corriger
Supprimez la valeur maximum-scale de la balise <meta name="viewport"> dans le modèle de mise en page, ou fixez-la à 5 au moins, et ne définissez pas user-scalable=no.
Critères de succès WCAG
Bonne pratique : non rattachée à un critère de succès WCAG.
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