Les problèmes d’ergonomie mobile non résolus peuvent avoir un impact important sur le trafic de votre site web. Un problème courant dont Google Search Console peut vous avertir est l’erreur « Éléments cliquables trop proches », qui signifie probablement que la navigation sur votre site est complexe pour les utilisateurs mobiles.
Plus de 4,32 milliards de personnes accèdent à l’internet depuis leurs appareils mobiles. Il est donc crucial de résoudre le plus rapidement possible cette erreur d’éléments cliquables. Heureusement, il existe plusieurs façons de le faire et de rendre votre site web plus adapté aux mobiles.
Dans cet article, nous expliquons ce qu’est le problème des « éléments cliquables trop proches », nous expliquons pourquoi il se produit et nous vous indiquons trois méthodes que vous pouvez utiliser pour le résoudre. Nous expliquerons également ce qu’est l’erreur « Contenu plus large que l’écran » et comment vous pouvez la résoudre.
Mettons-nous au travail !
Qu’est-ce que l’erreur « Clickable elements too close together » ?
En un mot, les erreurs d’ergonomie mobile peuvent rendre votre site WordPress inaccessible et plus difficile à parcourir pour les utilisateurs mobiles. Vous pouvez utiliser le rapport sur l’ergonomie mobile de Google Search Console pour tester votre site.L’outil de rapport sur l’ergonomie mobile de Google Search Console
Il existe six principaux types de problèmes d’ergonomie mobile que vous pouvez rencontrer :
- Utilise des extensions incompatibles
- Fenêtre d’affichage non configurée
- Fenêtre d’affichage non configurée sur « device-width ».
- Texte illisible car trop petit
- Contenu plus large que l’écran
- Éléments cliquables trop rapprochés
Dans le cadre de ce rapport, Google Search Console vérifiera tous les éléments cliquables de votre site, tels que les boutons et les liens. L’objectif est de vérifier si les utilisateurs mobiles peuvent interagir confortablement avec les éléments de votre site web en utilisant uniquement le toucher, plutôt que le clavier ou la souris.
Si Google Search Console détermine que vos éléments cliquables posent un problème aux utilisateurs mobiles, il inclura l’erreur « Éléments cliquables trop proches » dans votre rapport de synthèse.
Si vous cliquez sur l’erreur, vous accédez à la page de détails et d’état. Sur cet écran, vous pouvez en savoir plus sur le problème, notamment sur les pages concernées.
Essentiellement, l’erreur relative aux éléments cliquables est un avertissement indiquant que les éléments cliquables de votre site WordPress sont trop petits pour que les utilisateurs mobiles puissent interagir confortablement avec eux.
Il se peut aussi qu’ils soient suffisamment grands, mais placés trop près des éléments voisins. Si les boutons, liens et autres éléments cliquables sont trop proches les uns des autres, les utilisateurs risquent d’appuyer sur les mauvais éléments, ce qui nuit à l’expérience utilisateur (UX).
Bien que le fait d’avoir des éléments cliquables trop proches les uns des autres soit considéré comme une erreur d’ergonomie mobile, la résolution de ce problème peut également améliorer l’accessibilité de votre site. Par exemple, les personnes ayant des problèmes de dextérité peuvent apprécier un espace supplémentaire entre les éléments interactifs. À l’inverse, les utilisateurs souffrant de problèmes de vue peuvent trouver plus facile d’interagir avec des boutons et des liens larges et clairement définis.
Pourquoi l’erreur « Clickable elements too close together » peut-elle apparaître ?
Plusieurs facteurs peuvent être à l’origine du problème « Éléments cliquables trop proches ». Parfois, c’est simplement parce que Google n’a pas pu demander les ressources nécessaires lors du rendu. Si c’est le cas, vous pouvez essayer d’utiliser le test de compatibilité avec les mobiles et voir si le problème est résolu. Si c’est le cas, vous pouvez probablement l’ignorer.
Ce problème peut également résulter de la conception de votre site. Par exemple, si vous essayez de condenser trop d’éléments interactifs sur une seule page web, vous risquez de voir apparaître cette erreur d’ergonomie mobile.
Une autre raison de l’erreur des éléments cliquables est qu’il y a un problème avec la réactivité mobile de la conception de votre site. Votre site web doit être flexible et s’adapter automatiquement à l’appareil spécifique du visiteur pour offrir la meilleure expérience utilisateur possible. Cependant, si votre site n’est pas responsive, cela peut entraîner des problèmes d’ergonomie.
Plus précisément, si votre site web n’est pas responsive, certaines de ses parties peuvent apparaître étirées, rétrécies ou déformées sur certains écrans. Sur les appareils dotés d’un écran plus petit, les éléments que l’on peut toucher peuvent apparaître à l’étroit ou déformés.
L’identification de certaines des raisons standard et potentielles de l’apparition de cette erreur peut vous aider à mieux comprendre pourquoi votre site rencontre des problèmes d’ergonomie mobile. Cela vous aidera également à déterminer comment résoudre le problème.
Comment corriger l’erreur « Clickable elements too close together » (3 méthodes)
Si les utilisateurs mobiles ont du mal à naviguer sur votre site, qu’est-ce qui les empêche de s’en aller ? Il est essentiel de prévenir ce problème pour résoudre aussi rapidement que possible tous les problèmes d’ergonomie mobile. Jetons un coup d’œil à trois méthodes que vous pouvez utiliser pour corriger l’erreur « Éléments cliquables trop proches » et offrir une meilleure UX à vos utilisateurs mobiles.
1. Utiliser l’extension WordPress YellowPencil Visual Customizer
YellowPencil Visual Customizer est une extension WordPress sur l’interface publique qui vous permet de modifier les fichiers CSS et les fichiers de thème de votre site web sans code.
Cette extension est pratique pour modifier la taille de vos cibles cliquables, par exemple pour agrandir vos boutons. Vous pouvez également créer plus d’espace entre les éléments cliquables en modifiant les marges et l’espacement entre eux.
Vous pouvez télécharger gratuitement l’extension YellowPencil ou acheter une licence régulière ou étendue. Pour l’utiliser, installez-la et activez-la sur votre site WordPress en allant dans Extensions > Ajouter, en recherchant l’extension, puis en cliquant sur Installer > Activer.
Ensuite, allez dans YellowPencil > Personnalisations. Sous l’onglet Personnalisations, sélectionnez Commençons !
L’interface de la personnalisation visuelle se chargera et vous invitera à sélectionner la page qui déclenche l’erreur d’ergonomie mobile.
Vous pouvez appliquer vos modifications sur cette page spécifique ou sur l’ensemble de votre site web. Si de nombreuses pages présentent l’erreur des éléments cliquables, il est préférable de sélectionner Global.
Faites votre sélection, puis cliquez sur Continuer. Vous pouvez maintenant parcourir votre page web, en sélectionnant chaque élément pouvant être touché. YellowPencil affichera un panneau d’options d’édition pour cet élément.
Par exemple, dans la capture d’écran ci-dessous, nous avons sélectionné Padding et ajouté 10 pixels sur tous les côtés pour augmenter l’espace entre les cibles :
Les réglages Taille et Position permettent également de résoudre l’erreur « Éléments cliquables trop proches ». Bien que cela ne soit pas nécessaire, si vous souhaitez modifier directement le code CSS, vous pouvez le faire via le panneau de gauche.
Vous pouvez ensuite passer à l’élément suivant qui pose des problèmes d’ergonomie mobile et répéter le processus. Lorsque vous êtes satisfait de vos modifications, cliquez sur le bouton vert Enregistrer.
2. Assurez-vous que toutes les cibles mesurent au moins 48 px.
Il est impossible de créer un design unique et statique qui soit beau et fonctionne correctement sur tous les appareils. Il est préférable de créer une mise en page flexible en définissant toutes les cibles tactiles à l’aide de pixels indépendants de l’appareil (dpi). Les éléments définis à l’aide de dpi peuvent être automatiquement mis à l’échelle en fonction de la taille de l’écran de l’utilisateur.
Sur un appareil mobile, la cible tactile minimale recommandée est de 48×48 pixels. Cela équivaut à environ 9 mm, ce qui est suffisant pour le doigt d’une personne moyenne.
Par conséquent, si vous avez du mal à déterminer exactement quels éléments sont à l’origine du problème, il peut être utile d’examiner le nombre de dpi de chaque élément. S’il est inférieur à l’objectif tactile recommandé (24px, par exemple), vous pouvez augmenter la marge intérieure (padding) pour la porter à 48px.
Vous pouvez vérifier la valeur calculée d’une zone modifiable à l’aide de Chrome DevTools ou de Firefox DevTools, selon le navigateur que vous préférez. Nous allons utiliser Chrome à titre d’exemple.
Pour vérifier la valeur dpi de l’un des éléments cliquables de votre site WordPress, ouvrez-le dans un onglet du navigateur Chrome et accédez à la page présentant l’erreur « Éléments cliquables trop proches ». Faites un clic droit sur la page et sélectionnez Inspecter.
En cliquant sur Inspecter, vous ouvrirez Chrome DevTools. Dans la partie supérieure, cliquez sur l’icône affichant les appareils mobiles, ce qui vous amènera à l’écran de la barre d’outils « Toggle device toolbar ».
Dans le panneau d’aperçu de gauche, vous verrez une émulation de votre site sur un appareil mobile. Si vous survolez et cliquez sur n’importe quel élément pouvant être touché, vous pouvez voir la valeur calculée à droite :
Si nécessaire, vous pouvez ensuite ajuster la taille d’un élément en modifiant directement vos fichiers CSS et de site ou en utilisant une extension telle que YellowPencil.
3. Vérifiez la méthode de saisie
Si vous essayez de corriger l’erreur « Éléments cliquables trop proches », il peut être utile de vérifier la méthode de saisie. Il s’agit de la méthode ou du périphérique qu’un utilisateur utilise pour afficher et interagir avec votre site. Plus précisément, vous pouvez voir s’ils utilisent un smartphone, une tablette ou d’autres appareils.
Par exemple, le toucher est considéré comme une méthode de saisie imprécise. Comme nous venons de le voir, l’utilisation de CSS pour augmenter la taille de vos cibles tactiles ou ajouter une marge intérieure supplémentaire peut faciliter l’utilisation des cibles tactiles par les visiteurs qui utilisent des dispositifs tactiles pour interagir avec votre site web.
Cependant, déterminer le périphérique d’un utilisateur n’est pas une science exacte. Cette technique utilise ce que l’on appelle le « pointeur » pour vérifier la méthode de saisie principale de l’utilisateur, qui peut avoir l’une des deux valeurs suivantes :
- Coarse : La principale méthode de saisie de l’appareil est le toucher.
- Fine : La méthode de saisie est une souris et un trackpad.
Notez que si le toucher est la principale méthode de saisie de l’utilisateur, cela suggère que la personne consulte votre site web sur un smartphone ou une tablette.
Cependant, la présence d’un écran tactile ne garantit pas qu’une personne utilise un appareil mobile. Il se peut qu’il accède à votre site à l’aide d’un grand ordinateur portable à écran tactile, ou qu’il ait connecté un dispositif Bluetooth à son smartphone.
Si le pointeur renvoie une valeur coarse, vous pouvez ajuster la taille de la cible à toucher à l’aide de CSS. Pour ce faire, vous pouvez placer les éléments suivants dans le fichier CSS de votre thème WordPress (ou en utilisant une extension telle que YellowPencil) :
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Après avoir ajusté votre CSS, vous pouvez demander à Google d’explorer à nouveau votre site web pour déterminer si le problème a été résolu.
Vous pouvez également demander à Google d’explorer des URL individuelles à l’aide de l’outil d’inspection d’URL. Après avoir soumis votre URL via cet outil, sélectionnez Demander l’indexation. L’outil d’inspection testera alors l’URL pour détecter tout problème d’indexation évident.
En supposant que Google ne trouve aucun problème, la page pourra alors être indexée.
Sinon, si vous avez un grand nombre d’URL, vous pouvez soumettre un plan de site. Pour chaque page qui doit être ré-indexée, mettez à jour sa balise <lastmod> avec la date de dernière modification. Vous pouvez ensuite soumettre ce plan de site à l’aide de l’outil de rapport de sitemap de Google.
Dans la plupart des cas, votre plan de site sera transmis immédiatement. Toutefois, Google peut mettre un certain temps à explorer toutes les URL de votre plan de site, en fonction de facteurs tels que la taille, le trafic et l’activité du site. Il n’y a pas non plus de garantie que Google explorera chaque URL de votre plan de site.
Qu’est-ce que l’erreur « Contenu plus large que l’écran » ?
Comme vous vous en souvenez peut-être, Google Search Console peut vous avertir de diverses erreurs d’ergonomie mobile. En plus des « Éléments cliquables trop proches », votre rapport récapitulatif pourrait également inclure le problème du « Contenu plus large que l’écran ».
Ce problème apparaît au même endroit dans votre Google Search Console que l’erreur « Éléments cliquables ». De même, il a plusieurs causes potentielles.
Pourquoi l’erreur « Contenu plus large que l’écran » peut-elle apparaître ?
Cette erreur se produit lorsque la conception de votre site s’étend horizontalement, obligeant les utilisateurs mobiles à se déplacer latéralement pour voir le contenu « hors écran ». Pour offrir une bonne expérience utilisateur, vous devez éviter le défilement horizontal dans la mesure du possible.
Vous êtes plus susceptible de rencontrer le problème « Contenu plus large que l’écran » si vous utilisez des valeurs absolues dans vos déclarations CSS. Comme les mises en page rigides peuvent entraîner l’erreur « Éléments cliquables trop proches », il n’est pas rare de rencontrer ces deux erreurs dans le même rapport sur l’ergonomie mobile.
Comment corriger l’erreur « Contenu plus large que l’écran » (5 méthodes)
Si votre rapport comporte l’erreur « Contenu plus large que l’écran », vous pouvez utiliser quelques méthodes simples pour la résoudre. Jetons un coup d’œil à cinq des options les plus courantes.
1. Évitez d’utiliser des variables absolues dans les déclarations CSS
L’une des meilleures façons de corriger l’erreur « Contenu plus large que l’écran » est d’éviter d’utiliser des variables absolues dans vos déclarations CSS. Votre contenu ne doit pas nécessiter une fenêtre d’affichage spécifique pour s’afficher et fonctionner correctement.
Par conséquent, au lieu d’utiliser des valeurs absolues, vous devriez opter pour des valeurs de largeur et de position relatives pour vos éléments CSS. En utilisant des valeurs relatives dans la mesure du possible, vous pouvez créer des mises en page flexibles qui s’adaptent à différentes tailles d’écran.
2. Attribuez une largeur maximale aux images
Une image dont les dimensions sont fixes peut apparaître plus grande que la fenêtre d’affichage et, par conséquent, déclencher l’erreur « Contenu plus large que l’écran ». Pour que vos images soient mises à l’échelle en fonction des dimensions de l’écran, il est préférable d’attribuer à toutes les images une largeur maximale de 100 %.
Cela obligera l’image à rétrécir pour s’adapter à l’espace disponible. Même si vous utilisez max-width, vous devez toujours utiliser les attributs width et height dans votre balise <image>, car les navigateurs web modernes utilisent ces informations pour réserver de l’espace aux images lors de leur chargement. En utilisant la balise <image>, vous pouvez éviter les décalages de mise en page lorsque vos images apparaissent enfin à l’écran.
3. Utilisez les balises Meta Viewport
Par défaut, les navigateurs mobiles rendent la page à la largeur d’un écran d’ordinateur de bureau, qui est généralement d’environ 980px. Le navigateur tente alors d’optimiser votre page en augmentant la taille de la police et en mettant votre contenu à l’échelle pour l’adapter aux dimensions actuelles de l’écran.
Malheureusement, ce comportement par défaut peut entraîner des incohérences. Certains utilisateurs peuvent avoir besoin de faire un zoom avant pour lire votre contenu et interagir avec lui, c’est pourquoi vous pouvez voir cette erreur.
Au lieu de vous fier à ce comportement par défaut, vous devez donner au navigateur des instructions sur la manière de contrôler les dimensions et l’échelle de la page. Pour ce faire, insérez une balise meta viewport dans l’en-tête de votre document.
4. Utilisez les techniques modernes de mise en page CSS
Vous pouvez également corriger l’erreur « Contenu plus large que l’écran » en modifiant la mise en page de votre site. Pour vous aider à créer des mises en page plus flexibles, vous pouvez envisager de mettre en œuvre des techniques telles que Flexbox, CSS Grid Layout ou Multiple-Column Layout (Multicol).
5. Utilisez les requêtes média CSS lorsque c’est approprié
Les requêtes média peuvent faciliter le changement de style en fonction du périphérique de l’utilisateur, y compris les écrans tactiles. Par conséquent, si vous êtes toujours confronté à l’erreur « Contenu plus large que l’écran », nous vous recommandons d’utiliser les requêtes média CSS le cas échéant.
Après avoir effectué ces modifications, il est temps de vérifier si vous avez réussi à résoudre l’erreur « Contenu plus large que l’écran ». Pour cela, exécutez à nouveau le rapport d’ergonomie mobile et validez la correction en suivant les étapes décrites dans la section suivante.
Comment vérifier et valider la résolution de vos erreurs ?
Quelle que soit l’erreur à laquelle vous êtes confronté ou les méthodes que vous utilisez pour la corriger, il est essentiel de déterminer si vos modifications ont résolu le problème. Vous pouvez le faire en exécutant à nouveau les tests d’ergonomie mobile de Google.
Pour ce faire, revenez à votre rapport sur l’ergonomie mobile et repérez l’erreur « Éléments cliquables trop proches ». Ensuite, sélectionnez l’option Valider la correction.
Notez que vous pouvez répéter ces mêmes étapes si vous essayez de vérifier et de valider la résolution de votre erreur « Contenu plus large que l’écran ». Google explorera alors votre site web et vous recevrez un message vous indiquant qu’il est en train de valider la modification.
Si vous avez résolu l’erreur, la console de recherche Google affichera le message « Passed » et la coche verte qui l’accompagne. En revanche, si les solutions que vous avez employées ne sont pas validées, vous devrez réexaminer l’erreur pour mettre en œuvre une autre solution.
Résumé
Les erreurs d’ergonomie mobile non résolues peuvent entraîner une mauvaise expérience utilisateur et une baisse sensible du trafic de votre site web. En prenant des mesures pour résoudre les erreurs d’ergonomie, vous pouvez vous assurer que votre site web est adapté aux mobiles et accessible à un plus grand nombre de personnes.
Dans cet article, vous avez appris à corriger l’erreur « Éléments cliquables trop proches » à l’aide de trois méthodes :
- Modifiez votre site web à l’aide d’une extension d’édition de style CSS d’interface publique (comme YellowPencil).
- Utilisez Chrome DevTools pour vous assurer que toutes les cibles tactiles sont de 48 dpi ou plus.
- Vérifiez la méthode de saisie et adaptez votre CSS en conséquence.
Vous avez des questions sur la correction de l’erreur « Éléments cliquables trop proches » ? Faites-nous en part dans les commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire