Comment réparer « Les cibles tactiles ne sont pas dimensionnées de manière appropriée » sur WordPress

Lighthouse est un outil puissant qui vous permet de rassembler des informations utiles sur les performances de vos pages Web. L'un des problèmes de conception les plus courants signalés est le suivant : « Les cibles de frappe ne sont pas dimensionnées de manière appropriée » . Cependant, si vous n'êtes pas un développeur ou un concepteur Web, vous ne savez peut-être pas ce que cela signifie ni comment y remédier.

Heureusement, il est relativement simple de rendre vos pages plus conviviales et de remédier à ce problème particulier de Lighthouse. Par exemple, vous pouvez augmenter la taille des cibles tactiles ou l’espacement entre elles.

Une introduction au problème « Les cibles de tapotement ne sont pas dimensionnées de manière appropriée »

Avant d'explorer le problème « Les cibles tactiles ne sont pas correctement dimensionnées », vous devez en savoir un peu plus sur Lighthouse. Cet outil open source vous permet d'évaluer la qualité et les performances de vos pages Web. Par exemple, vous pouvez recueillir des informations sur l'accessibilité de votre site, le référencement, la vitesse des pages, la conception, etc.

Si vous avez beaucoup d'expérience en développement Web, vous pouvez exécuter Lighthouse dans Chrome DevTools ou à partir de la ligne de commande. Cependant, PageSpeed ​​Insights est également alimenté par Lighthouse et constitue souvent une bonne alternative pour les débutants.

Pour obtenir une évaluation avancée de votre site internet, il vous suffit de saisir l'URL de votre site et de cliquer sur Analyser :

L'analyse commencera peu de temps après. Ensuite, vous pouvez afficher des détails sur les performances et l'optimisation de votre page Web. PageSpeed ​​Insights facilite cela en catégorisant les détails sous des titres clairs.

Si vous faites défiler vers le bas, vous trouverez la section Mobile Friendly . C'est ici que vous verrez des informations sur les cibles tactiles :

Comme vous pouvez le voir, notre analyse a renvoyé le problème « Les cibles de tapotement ne sont pas dimensionnées de manière appropriée ». Si vous développez la section, vous trouverez des informations plus détaillées sur chacune de vos cibles tactiles.

Les cibles tactiles sont les zones de votre page Web avec lesquelles les utilisateurs peuvent interagir sur des appareils tactiles. Par exemple, les visiteurs peuvent toucher des images, des boutons, des liens ou des éléments de formulaire.

Les drapeaux de phare touchent des cibles trop petites (moins de 48 px sur 48 px). Vous verrez également le message d'avertissement si vos cibles tactiles n'ont pas suffisamment d'espace autour d'elles, ce qui entraîne un chevauchement des cibles.

Vous pourriez rencontrer ce problème lorsque vous créez la version de bureau de votre site Web sans optimiser l'expérience mobile. Sur le bureau, tous les éléments de votre page peuvent bien s'assembler, mais s'ils ne peuvent pas s'adapter aux différentes tailles d'écran, cela pose des problèmes.

Comment résoudre le problème « Les cibles tactiles ne sont pas dimensionnées de manière appropriée »

Maintenant que vous en savez plus sur Lighthouse et sur le problème « Les cibles tactiles ne sont pas correctement dimensionnées », examinons quelques moyens simples de résoudre ce problème.

1. Augmenter la taille des cibles tactiles
2. Augmenter l'espacement entre les cibles tactiles

1. Augmentez la taille des cibles tactiles

La première façon de résoudre le problème « Les cibles tactiles ne sont pas dimensionnées de manière appropriée » consiste à augmenter la taille des cibles tactiles elles-mêmes. Considérons donc quelques éléments de conception qui servent de cibles tactiles.

Comme nous l'avons mentionné, les liens, les boutons, les icônes et les éléments de formulaire peuvent tous servir de cibles tactiles. Par conséquent, vous devrez vous assurer que la taille de ces caractéristiques de conception ne descend pas en dessous de 48 px sur 48 px. Dans cette section, nous allons vous montrer comment redimensionner les boutons et les liens de vos pages.

Augmenter la taille des boutons dans WordPress

Pour redimensionner les boutons de votre site Web, vous devrez ouvrir le personnalisateur WordPress. Vous pouvez le faire en accédant à Apparence > Personnalisateur dans votre tableau de bord. Ensuite, sélectionnez Boutons :

Il existe désormais plusieurs façons d’augmenter la taille des boutons. Tout d'abord, vous pouvez augmenter le poids à l'aide de la liste déroulante. Cela ne modifiera pas radicalement la taille de la cible tactile, mais cela ajoutera un peu plus de volume et de définition :

Pour optimiser davantage une cible tactile, vous pouvez augmenter sa hauteur de ligne . Cela augmentera la taille de la cible verticalement. De plus, si vous modifiez la valeur de Letter Spacing , vous pouvez étendre la taille du bouton horizontalement :

Pensez ensuite à cliquer sur Publier pour enregistrer vos modifications.

Augmenter la taille des liens dans WordPress

Les liens peuvent diriger les utilisateurs vers d’autres pages de votre site Web. Par conséquent, ils pourraient encourager les visiteurs à rester plus longtemps sur votre site.

Cependant, pour que les visiteurs puissent « toucher » ou appuyer sur vos cibles de liens, vous devez les rendre cliquables. Le moyen le plus simple d’y parvenir est d’augmenter la taille des liens.

Vous pouvez le faire directement dans la publication ou la page concernée. Par exemple, vous pouvez proposer un bloc Boucle de requête afin que les utilisateurs puissent voir une liste de vos articles de blog publiés :

Dans ce scénario, chacun de vos titres de publication peut contenir un lien. En attendant, vous pouvez inclure un lien Lire la suite supplémentaire pour diriger les visiteurs directement vers la publication.

L'un des avantages de l'utilisation d'un lien dans le titre de vos publications est qu'il est très simple d'augmenter la taille de la cible d'appui. Tout ce que vous avez à faire est de cliquer sur le titre du lien. Ensuite, accédez à Modifier le niveau de titre dans la barre d'outils :

Ici, vous pouvez augmenter la taille du lien en optant pour un format H1 ou H2.

De plus, vous pouvez également avoir des liens dans le texte de votre paragraphe. Vous pouvez augmenter la taille de ces cibles tactiles en cliquant sur l’élément. Ensuite, dans les paramètres du Bloc, dirigez-vous vers Typographie :

Ici, utilisez la liste déroulante TAILLE (PX) pour passer de Normal à un paramètre plus grand :

Ensuite, assurez-vous d'enregistrer vos modifications.

2. Augmentez l'espacement entre les cibles tactiles

La deuxième façon de résoudre le problème « Les cibles tactiles ne sont pas correctement dimensionnées » dans Lighthouse consiste à augmenter l’espacement entre les cibles tactiles. Chrome indique que 8 px sont généralement suffisants. Cependant, pour les cibles tactiles plus petites, vous devrez peut-être augmenter davantage la distance pour réussir l'audit Lighthouse. Il existe plusieurs façons de procéder.

Ajuster la propriété de remplissage

Une façon d’augmenter l’espace entre les cibles tactiles consiste à ajuster la propriété de remplissage des éléments. Cela augmentera la distance entre les cibles en ajoutant des marges à l'élément.

Vous pouvez le faire avec vos boutons en ouvrant le WordPress Customizer. Ensuite, dirigez-vous vers Boutons . Vous trouverez la propriété Padding en haut des paramètres généraux :

Pour résoudre le problème « Les cibles tactiles ne sont pas dimensionnées de manière appropriée », augmentez simplement le remplissage autour de votre bouton. Assurez-vous que vous êtes en PX et non en EM ou REM .

Cela peut être une bonne idée d'essayer d'abord d'augmenter le remplissage de chaque côté de 10 px. Ensuite, vous pouvez augmenter encore plus la taille entre les cibles si nécessaire.

Vous constaterez peut-être que l’ajout de remplissage supplémentaire déplace l’un de vos boutons sur une nouvelle ligne. Dans ce cas, vous pouvez également augmenter la valeur de remplissage en haut et en bas pour mettre plus d'espace entre vos cibles :

Assurez-vous de cliquer sur Publier pour enregistrer vos modifications.

Utilisez le bloc WordPress Spacer

Une autre approche pour ajouter de l'espace entre les éléments de la page consiste à utiliser le bloc WordPress Spacer. Tout cela ne fait qu'ajouter un espace vide à votre page, gardant vos cibles tactiles à une plus grande distance les unes des autres.

Par exemple, vous pourriez avoir deux boutons empilés l’un sur l’autre :

Bien qu'il puisse sembler qu'il y ait suffisamment d'espace entre ces cibles tactiles, lorsque vous prévisualisez la disposition sur le frontal, vous pouvez voir que les boutons se chevauchent presque :

Dans ce cas, vous pouvez ajouter un bloc d'espacement entre les boutons pour résoudre le problème « Les cibles tactiles ne sont pas correctement dimensionnées ». Cliquez simplement sur l'icône + entre les blocs. Ensuite, recherchez « spacer » :

Ajoutez le bloc à votre page et cela crée instantanément un espace entre vos éléments. Maintenant, cliquez sur Publier pour enregistrer vos modifications et afficher les boutons sur le front-end :

Comme vous pouvez le constater, il y a désormais plus d’espace entre vos cibles tactiles.

Conclusion

Pour récapituler, voici deux façons de résoudre ce problème :

1. Augmentez la taille des cibles tactiles.
2. Augmentez l’espacement entre les cibles tactiles.

Avez-vous des questions sur la façon de résoudre le problème « Les cibles tactiles ne sont pas correctement dimensionnées » ? Faites-le nous savoir dans les commentaires ci-dessous !