Accessibilité viewport [user-scalable=”no”] et [maximum-scale]
![Accessibilité viewport [user-scalable=”no”] et [maximum-scale]](https://metaforweb.com/wp-content/uploads/2023/11/balise-meta-viewport-erreur-accessibilite.png)
Dans les tests d’accessibilité Web, vous rencontrez cette erreur concernant la balise meta viewport : l’attribut [user-scalable="no"] est utilisé dans l’élément <meta name="viewport"> ou l’attribut [maximum-scale] est inférieur à 5.
Ou si votre outil de test pour l’accessibilité est en anglais : [user-scalable="no"] is used in the element <meta name="viewport"> or the [maximum-scale] attribute is less than 5.
Cette erreur vous rend perplexe ?
Alors, levons le mystère et voyons ensemble :
- Ce qu’est une balise meta et plus précisément la balise meta viewport
- Les bonnes pratiques à adopter pour rendre le viewport accessible
- Comment corriger l’erreur d’accessibilité dans la balise viewport
Qu’est-ce qu’une balise meta ?
Pour commencer, il faut savoir que meta est le raccourci de métadonnée. Et aussi qu’une métadonnée fournit des informations complémentaires sur une autre donnée.
Les métadonnées servent par exemple à indiquer aux navigateurs comment afficher le contenu d’une page Web comme les balises meta viewport, meta charset…
Elles permettent également aux moteurs de recherche de mieux comprendre le contenu de la page. Ici, on peut citer les balises meta description, meta robot…
Les balises meta sont par ailleurs utiles pour les réseaux sociaux lors du partage d’un article de votre site. En ce cas, ce sont les balises meta Open Graph qui entrent en jeu.
Enfin, il est à noter que les balises meta sont directement intégrées dans le code source des pages Web, et plus précisément dans leur en-tête (entre les balises <head> et </head>). Elles ne sont par conséquent pas visibles par le visiteur du site.
Ceci étant dit, passons à la balise meta qui nous intéresse ici, à savoir la balise meta viewport.
Qu’est-ce que le viewport et la balise meta viewport ?
Le viewport désigne la zone visible par le visiteur d’une page Web, c’est-à dire la fenêtre d’affichage.
Pour la petite histoire, au début du Web, les sites étaient conçus uniquement pour les écrans d’ordinateur de bureau. De plus, la plupart du temps, leur conception était statique et de taille fixe. Cela ne posait aucun problème jusqu’à ce que l’on commence à surfer sur le Web avec des tablettes ou des téléphones portables. À partir de ce moment-là, les pages Web de taille fixe se sont alors révélées trop grandes pour tenir dans la fenêtre d’affichage de ces écrans plus petits.
C’est alors qu’Apple a eu l’idée géniale d’introduire la balise meta viewport pour résoudre ce problème. Depuis ce jour, grâce à elle, les concepteurs Web peuvent contrôler la taille et l’échelle de la fenêtre d’affichage. Ainsi, la page Web peut être facilement réduite et s’adapter à l’écran de l’appareil utilisé.
En règle générale, dans les sites Web optimisés pour les mobiles, on trouve cette balise avec les valeurs de base suivantes :
<meta name="viewport" content="width=device-width, initial-scale=1">Le code ci-dessus indique au navigateur les choses suivantes :
name="viewport": balise meta se rapportant à la fenêtre d’affichagewidth=device-width: définition de la largeur de la fenêtre d’affichage pour correspondre à la largeur de l’appareil afin que le contenu s’adapte à toutes les largeurs d’écraninitial-scale: indication du niveau de zoom lors du premier chargement de la pageinitial-scale=1: conservation du niveau de zoom initial par défaut
D’autres attributs sont néanmoins disponibles comme : minimum-scale, maximum-scale et user-scalable.
minimum-scale: définition du niveau de zoom minimum auquel un utilisateur peut zoomer sur la pagemaximum-scale: définition du niveau de zoom maximum auquel un utilisateur peut zoomer sur la pageuser-scalable: interdiction ou autorisation pour l’utilisateur de zoomer ou dézoomer sur la page
Mais, le problème est qu’une mauvaise utilisation de ces attributs supplémentaires peut provoquer une erreur en termes d’accessibilité.
Quelles sont les bonnes pratiques à adopter pour l’accessibilité du viewport ?
Premièrement, la balise meta viewport doit être présente sur votre site afin qu’il s’adapte à toutes les tailles d’écran.
Deuxièmement, ne désactivez pas le zoom et la mise à l’échelle, car cela empêche les personnes à faible vision de lire et de comprendre le contenu de la page. L’emploi du paramètre user-scalable=no ou user-scalable=0 est donc à proscrire.
Troisièmement, si vous utilisez l‘attribut maximum-scale, indiquez une valeur minimale de “2“. En effet, cela permettra aux utilisateurs malvoyants d’agrandir les polices de leur navigateur pour faciliter leur lecture du texte sur le Web.
D’ailleurs, il s’agit de la règle 1.4.4 des WCAG qui demandent aux développeurs de concevoir des pages qui prennent en charge le redimensionnement jusqu’à 200 % pour le texte.
Comment corriger l’erreur d’accessibilité du viewport ?
Maintenant que vous savez ce qu’est le viewport et les paramètres que l’on peut lui appliquer. Le moment est venu de corriger votre balise meta viewport afin de rendre le viewport accessible à tous.
L’erreur indiquée par défaut par Lighthouse est toujours la même : “L’attribut [user-scalable="no"] est utilisé dans l’élément, ou l’attribut [maximum-scale] est inférieur à 5″.
Cette erreur d’accessibilité indique que votre balise meta viewport n’est pas la balise de base et que des attributs supplémentaires ont été ajoutés. Le problème est qu’apparemment, ce ne sont pas les bons…
En bref, cela peut être l’attribut user-scalable="no" (ou=0) qui désactive la possibilité de zoomer de l’utilisateur ou encore maximum-scale avec une valeur “=1” ce qui revient à la même chose.
Prenons un exemple d’erreur relevée dans un site utilisant le thème Ewebot:
Ici, la balise meta viewport est conçue ainsi :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Si l’on examine le code, on peut d’ores et déjà éliminer “l’attribut [user-scalable="no"] est utilisé dans l’élément”. En effet, il n’est pas présent ni user-scalable=0.
Le problème vient donc forcément de l’attribut [maximum-scale] est inférieur à 5.
Effectivement, ici, on peut constater que la propriété maximum-scale a comme valeur “1”. Ceci indique que la modification de l’échelle de la fenêtre d’affichage est impossible. Le problème d’accessibilité réside dans le fait que l’utilisateur ne pourra pas zoomer ce qui est contraire aux recommandations du WCAG.
Pour résoudre l’erreur, il faut donc modifier la valeur “1” en la passant au minimum à “2”.
Pour ce faire, le plus simple est de copier le fichier header.php de votre thème parent dans votre thème enfant. Ensuite, il vous suffira de trouver la ligne de code et de la modifier.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">La balise meta viewport du fichier header.php de votre thème enfant supplantera alors celle de votre thème et l’erreur n’apparaitra plus.
Vous pouvez copier le fichier via FTP avec FileZilla, via le gestionnaire de fichiers de votre hébergeur ou encore avec WP File Manager. Par exemple, sur o2switch, cliquez sur gestionnaire de fichiers. Puis rendez-vous dans le dossier de votre site.
Ensuite, positionnez-vous le fichier header.php se trouvant sous wp-content/themes/votrethemeparent. Faites un clic droit et choisissez “copier”.
Dans la fenêtre qui s’affiche, renseignez le chemin de votre thème enfant (wp-content/themes/votrethemeenfant et cliquez sur “copy files”).
Enfin, allez dans le dossier de votre thème enfant et ouvrez le fichier header.php qui est apparu. Modifiez le code comme indiqué ci-dessus… Et n’oubliez pas d’enregistrer.
Comment corriger l’erreur d’accessibilité du viewport dans Divi ?
Dans Divi, le zoom est désactivé par défaut. Cela nuit évidemment à l’accessibilité, car les utilisateurs malvoyants ne peuvent pas zoomer pour afficher le contenu.
Le code natif pour la balise meta viewport dans Divi est celui-ci :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">Ici, on relève deux problèmes :
maximum-scale=1.0qui définit la possibilité de zoom maximal à “1”, donc pas de zoom possibleuser-scalable=0qui interdit à l’utilisateur de zoomer
Pour résoudre cette erreur d’accessibilité, allez dans le fichier functions.php de votre thème enfant et ajoutez ce code. Il remplace maximum-scale=1.0 par maximum-scale=2.0 ce qui permet aux utilisateurs de redimensionner le contenu jusqu’à 200 %. Et il modifie également user-scalable=0 en user-scalable=1 pour autoriser les utilisateurs à zoomer.
function remove_my_action() {
remove_action('wp_head', 'et_add_viewport_meta');
}
function custom_et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />';
}
add_action( 'init', 'remove_my_action');
add_action( 'wp_head', 'custom_et_add_viewport_meta' );⚠️ Ne modifiez pas le fichier functions.php de votre thème sous peine de voir les modifications que vous y avez apportées écrasées lors d’une prochaine mise à jour.
💡 Si vous n’avez pas créé de thème enfant, utilisez l’extension Code Snippets pour ajouter le code.
Comment essayer de rendre un site accessible à tous
Pour conclure, la correction de l’erreur relative au viewport est en fait une bonne pratique à adopter en matière d’accessibilité Web.
Mais, il existe encore beaucoup d’autres règles à appliquer pour qu’un site soit accessible à tous.
Alors, pensez à tester l’accessibilité de votre site grâce à des outils gratuits. Puis, essayez de remédier aux erreurs décelées une par une.
Et vous, faites-vous attention à respecter les normes d’accessibilité Web lorsque vous créez un site, notamment en termes de contraste des couleurs ?
Vous pourriez aussi aimer...
Soumettre un commentaire 💬