Per molti anni, i browser mobile hanno applicato un ritardo di 300-350 ms tra il giorno touchend e il giorno click in attesa di vedere se si trattasse di un doppio tocco o meno, dato che il doppio tocco era un gesto per aumentare lo zoom del testo.
Sin dalla prima release di Chrome per Android, questo ritardo è stato rimosso se era stata disattivata anche la funzione di zoom pizzico. Tuttavia, pizzica lo zoom è una funzione di accessibilità importante. A partire da Chrome 32 (nel 2014), questo ritardo non sarà più disponibile per i siti ottimizzati per i dispositivi mobili, senza rimuovere lo zoom tramite pizzico. Firefox e IE/Edge hanno fatto lo stesso poco dopo e nel marzo 2016 una soluzione simile è arrivata su iOS 9.3.
La differenza di prestazioni è enorme!
Grazie a una UI che risponde immediatamente, l'utente può premere rapidamente ogni pulsante in tutta sicurezza, invece di mettere in pausa e attendere una risposta. Scopri di più sull'impatto dei tempi di reazione umani e delle prestazioni sul web nella nostra introduzione a RAIL.
Per rimuovere il ritardo del tocco di 300-350 ms, ti serve solo quanto segue nella sezione <head> della pagina:
<meta name="viewport" content="width=device-width">
Consente di impostare la larghezza dell'area visibile in modo che corrisponda a quella del dispositivo ed è in genere una best practice per i siti ottimizzati per i dispositivi mobili. Con questo tag, i browser presuppongono che il testo sia leggibile sui dispositivi mobili e la funzionalità di doppio tocco per eseguire lo zoom viene eliminata in favore dei clic più rapidi.
Se per qualche motivo non puoi apportare questa modifica, puoi utilizzare touch-action: manipulation per ottenere lo stesso effetto in tutta la pagina o in determinati elementi:
html {
touch-action: manipulation;
}
Questa tecnica non è supportata in Safari, pertanto il tag area visibile è di gran lunga preferito.
Perdere il doppio tocco per eseguire lo zoom rappresenta un problema di accessibilità?
No. Lo zoom pizzica continua a funzionare e le funzionalità del sistema operativo sono adatte agli utenti che trovano difficile questo gesto. Su Android, sono disponibili i gesti di ingrandimento. Strumenti come questo funzionano anche al di fuori del browser.
E i browser meno recenti?
FastClick di FT Labs utilizza gli eventi tocco per attivare più velocemente i clic e rimuove il gesto del doppio tocco. Controlla la quantità di spostamento del dito tra touchstart e touchend per differenziare gli scorrimenti e i tocchi.
L'aggiunta di un listener touchstart a tutto ciò ha un impatto sulle prestazioni, perché le interazioni di livello inferiore, come lo scorrimento, vengono ritardate chiamando il listener per verificare se event.preventDefault(). Fortunatamente, FastClick eviterà di impostare i listener nei casi in cui il browser abbia già rimosso il ritardo di 300 ms, in modo da ottenere il meglio da entrambi.