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)
Avant et après Données d’exemple

layout/checkout.liquid Modifications apportées à layout/checkout.liquid (lignes ajoutées : 1, lignes supprimées : 1)

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)

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)

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)
removes the zoom lock from the fixture theme and the rule stops firing Données d’exemple

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)

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)
re-enables zoom in every header template of the fixture theme Données d’exemple

header-checkout.php Modifications apportées à header-checkout.php (lignes ajoutées : 1, lignes supprimées : 1)

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)

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)
removes the zoom block from default_head_blocks.xml and validates Données d’exemple

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)

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 gratuite

Ou é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

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité