Quando il tuo progetto viene visualizzato su un dispositivo mobile, devi assicurarti che gli elementi interattivi, come pulsanti o link, siano abbastanza grandi, e abbiano abbastanza spazio intorno a loro, per facilitarne la pressione senza sovrapporsi accidentalmente ad altri elementi. Questo approccio offre vantaggi a tutti gli utenti, ma è particolarmente utile per persone con disabilità motorie.
Una dimensione minima consigliata per il touch target è di circa 48 pixel indipendenti dal dispositivo su un sito con un'area visibile per dispositivi mobili impostata correttamente. Ad esempio, anche se un'icona può avere solo larghezza e altezza di 24 px, puoi utilizzare una spaziatura interna aggiuntiva per portare le dimensioni del target del tocco fino a 48 px. L'area di 48x48 pixel corrisponde a circa 9 mm, che è all'incirca le dimensioni dell'area del polpastrello di una persona.
Nella demo, ho aggiunto una spaziatura interna a tutti i link per assicurarmi che soddisfino le dimensioni minime.
Anche i touch target devono avere una distanza di circa 8 pixel l'uno dall'altro. sia orizzontalmente che verticalmente, in modo che il dito dell'utente che preme su un target del tocco non tocchi inavvertitamente un altro target del tocco.
Test dei touch target
Se il target è di tipo testo e hai utilizzato valori relativi come em o rem per ridimensionare il testo e la spaziatura interna,
puoi utilizzare DevTools per verificare che il valore calcolato per quell'area sia abbastanza grande.
Nell'esempio seguente utilizzo em per il testo e la spaziatura interna.
Controlla a del link,
e in Chrome DevTools passa al riquadro Elaborato, dove puoi esaminare le varie parti della scatola
e vedere con quale dimensione in pixel si risolvono.
In Firefox DevTools è presente un riquadro Layout.
In questo riquadro vengono visualizzate le dimensioni effettive dell'elemento ispezionato.
Utilizzo di query supporti per rilevare l'uso del touchscreen
Invece di testare le dimensioni dell'area visibile e poi tirare a indovinare che è probabile che le dimensioni ridotte siano telefoni o tablet, che a loro volta usano un touchscreen, ora ci sono modi più affidabili per adattare il tuo design in base alle effettive funzionalità del dispositivo.
Una delle funzionalità multimediali che possiamo ora testare con le query supporti
indica se l'input principale dell'utente è un touchscreen (pointer) e
Indica se uno degli input attualmente rilevati è un touchscreen (any-pointer).
Le funzionalità pointer e any-pointer restituiranno fine o coarse.
Un puntatore piccolo
è l'utilizzo di un mouse o di un trackpad,
anche se il mouse è connesso tramite Bluetooth a un telefono.
Un puntatore coarse indica un touchscreen,
che può essere un dispositivo mobile, ma anche lo schermo di un laptop o un tablet di grandi dimensioni.
Se modifichi il CSS in una query multimediale per aumentare il touch target, il test con un puntatore approssimativo consente di aumentare i target dei tocchi per tutti gli utenti del touchscreen. In questo modo, l'area tocco più ampia può stabilire se si tratta di uno smartphone o di un dispositivo più grande.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Puoi scoprire di più sulle funzionalità multimediali di interazione come il puntatore nell'articolo Nozioni di base sul responsive web design.