Les éléments tactiles ne sont pas dimensionnés correctement

Les zones cibles tactiles sont les zones d'une page Web avec lesquelles les utilisateurs d'appareils tactiles peuvent interagir. Les boutons, les liens et les éléments de formulaire sont tous dotés d'éléments tactiles.

De nombreux moteurs de recherche classent les pages en fonction de leur adaptation aux mobiles. Assurez-vous que les éléments tactiles sont suffisamment grands et suffisamment éloignés les uns des autres pour rendre votre page plus adaptée aux mobiles et plus accessible.

Échec de l'audit des éléments tactiles de Lighthouse

Lighthouse signale les pages comportant des éléments tactiles qui remplissent les deux conditions suivantes:

  • La cible fait moins de 48 x 48 pixels.
  • Au moins 25% de la zone cible située à moins de 48 pixels du centre de la cible chevauche une autre cible.
Audit de Lighthouse montrant des éléments tactiles de taille inappropriée

En cas d'échec de l'audit, Lighthouse répertorie les résultats dans une table à trois colonnes:

Cible tactile La taille de l'élément tactile n'est pas appropriée.
Taille Taille du rectangle de délimitation de la cible en pixels.
Cible en chevauchement Les autres éléments tactiles qui sont trop proches, le cas échéant.

Corriger les éléments tactiles

Option 1:Augmentez la taille des éléments tactiles trop petits. Les éléments tactiles de 48 x 48 pixels n'échouent jamais à l'audit. Si certains de vos éléments ne doivent pas apparaître en plus grand (par exemple, des icônes), essayez d'augmenter la propriété padding:

Des éléments tactiles de taille appropriée
Utilisez padding pour agrandir les éléments tactiles sans modifier l'apparence d'un élément.

Option 2:augmentez l'espacement entre les éléments tactiles trop proches les uns des autres à l'aide de propriétés telles que margin. Un espace de 8 pixels entre les éléments tactiles est un bon point de départ, mais cet espace n'est pas toujours suffisant pour réussir l'audit, en particulier pour les cibles de très petite taille.

Ressources