Dimensionner les éléments tactiles de manière appropriée

Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que certains éléments tactiles (par exemple, des boutons, des liens ou des champs de formulaires) semblent être trop petits ou trop rapprochés pour qu'un internaute puisse facilement appuyer dessus sur un écran tactile.

Présentation

Sur un écran tactile, il est plus difficile d'appuyer sur des liens ou des boutons de petite taille ou rapprochés qu'avec un curseur de souris traditionnel. Pour éviter à vos utilisateurs d'appuyer par mégarde sur les mauvais éléments tactiles, ces derniers doivent être suffisamment grands et éloignés les uns des autres pour que les internautes puissent appuyer dessus sans toucher d'autres éléments tactiles. La largeur de la pulpe du doigt d'un adulte est en moyenne de 10 mm, et les consignes relatives à l'interface utilisateur Android recommandent un élément tactile d'environ 7 mm au minimum ou de 48 pixels CSS sur un site avec une fenêtre d'affichage pour mobile correctement configurée.

Recommandations

Vous devez veiller à ce que les éléments tactiles les plus importants de votre site, ceux que les internautes utiliseront le plus souvent, soient assez grands pour qu'il soit facile d'appuyer dessus. Ils doivent faire au moins 48 pixels CSS de hauteur et de largeur, si vous avez correctement configuré votre fenêtre d'affichage. Les liens moins utilisés peuvent être plus petits, mais ils doivent être suffisamment espacés pour qu'un internaute dont la pulpe de doigt mesure 10 mm n'appuie pas accidentellement sur deux liens à la fois. Les internautes ne devraient pas avoir à pincer et zoomer (ni à utiliser des fonctionnalités de visibilité telles que la loupe pop-up de Chrome) pour appuyer facilement et sans risque d'erreur sur le bouton ou le lien désiré.

Faites en sorte que les éléments tactiles importants soient assez grands pour qu'il soit facile d'appuyer dessus

Cela concerne les éléments tactiles que vos internautes utiliseront le plus, comme les boutons des actions fréquemment effectuées, les barres de recherche, les champs de formulaires importants et les principaux liens de navigation. Ces éléments tactiles doivent faire au moins 7 mm (48 pixels CSS si vous avez correctement configuré votre fenêtre d'affichage), et l'espacement entre eux doit être plus important si leur taille est inférieure à 7 mm.

Assurez-vous qu'il y ait un espacement plus important entre les éléments tactiles plus petits

Il est acceptable que les liens ou les boutons peu utilisés soient plus petits que la taille recommandée de 7 mm, mais il ne doit y avoir aucun autre élément tactile dans les 5 mm (32 pixels CSS) autour d'eux, horizontalement ou verticalement, afin qu'un internaute qui appuie sur un élément tactile n'en touche pas un autre par inadvertance.