I target dei tocchi non hanno dimensioni appropriate

I target dei tocchi sono le aree di una pagina web con cui possono interagire gli utenti che utilizzano dispositivi touch. Pulsanti, link ed elementi del modulo hanno tutti target dei tocchi.

Molti motori di ricerca classificano le pagine in base a quanto sono ottimizzate per i dispositivi mobili. Fare in modo che i target dei tocchi siano abbastanza grandi e sufficientemente distanti l'uno dall'altro rende la pagina più ottimizzata per i dispositivi mobili e accessibile.

In che modo il controllo dei target dei tocchi di Lighthouse non riesce

Lighthouse segnala le pagine con target dei tocchi che soddisfano entrambe le seguenti condizioni:

  • Il target è inferiore a 48 x 48 px.
  • Almeno il 25% dell'area target a 48 px dal centro del target si sovrappone a un altro target.
Controllo Lighthouse che mostra target dei tocchi di dimensioni inappropriate

Quando il controllo non va a buon fine, Lighthouse elenca i risultati in una tabella con tre colonne:

Tocca Target Il target dei tocchi ha dimensioni inappropriate.
Dimensioni Le dimensioni in pixel del rettangolo di delimitazione dell'obiettivo.
Target sovrapposto Quali altri target dei tocchi, se presenti, sono troppo vicini.

Come correggere i target dei tocchi

Opzione 1. Aumenta le dimensioni dei target dei tocchi troppo piccoli. I target dei tocchi di 48 x 48 px non superano il controllo. Se alcuni elementi non dovrebbero essere più grandi (ad esempio icone), prova ad aumentare la proprietà padding:

Target tocco di dimensioni appropriate
Utilizza padding per ingrandire i target dei tocchi senza modificare l'aspetto di un elemento.

Opzione 2: aumenta la spaziatura tra i target dei tocchi troppo vicini tra loro utilizzando proprietà come margin. Una distanza di 8 px tra i target dei tocchi è un buon punto di partenza, ma lo spazio non è sempre sufficiente per superare il controllo, soprattutto per target molto piccoli.

Risorse