Pendant de nombreuses années, les navigateurs mobiles ont appliqué un délai de 300 à 350 ms entre touchend et click, le temps d'attendre de savoir s'il s'agissait d'un double appui ou non, car un double appui était un geste permettant de faire un zoom avant sur le texte.
Depuis la première version de Chrome pour Android, ce délai a été supprimé si le zoom avec pincement était également désactivé. Cependant, le zoom par pincement est une fonctionnalité d'accessibilité importante. Depuis Chrome 32 (en 2014), ce retard n'existe plus pour les sites optimisés pour mobile, sans supprimer le pincement pour zoomer. Firefox et IE/Edge ont fait de même peu de temps après, et en mars 2016, un correctif similaire a été publié dans iOS 9.3.
La différence de performances est énorme !
Une interface utilisateur qui répond instantanément signifie que l'utilisateur peut appuyer rapidement sur chaque bouton en toute confiance, au lieu de s'arrêter et d'attendre une réponse. Pour en savoir plus sur l'impact des temps de réaction humains et des performances Web, consultez notre présentation de RAIL.
Pour supprimer le délai de pression de 300 à 350 ms, il vous suffit d'ajouter le code suivant dans le <head> de votre page:
<meta name="viewport" content="width=device-width">
La largeur de la fenêtre d'affichage est alors identique à celle de l'appareil. Il s'agit généralement d'une bonne pratique pour les sites optimisés pour les mobiles. Avec cette balise, les navigateurs supposent que vous avez rendu le texte lisible sur mobile. La fonctionnalité de double-tapping pour zoomer est donc abandonnée au profit de clics plus rapides.
Si vous ne pouvez pas effectuer cette modification pour une raison quelconque, vous pouvez utiliser touch-action: manipulation pour obtenir le même effet sur la page ou sur des éléments spécifiques:
html {
touch-action: manipulation;
}
Cette technique n'est pas compatible avec Safari. Il est donc préférable d'utiliser la balise de viewport.
La suppression de la fonctionnalité permettant de faire un double appui pour faire un zoom avant pose-t-elle un problème d'accessibilité ?
Non. Le zoom avec pincement continue de fonctionner, et les fonctionnalités de l'OS sont adaptées aux utilisateurs qui trouvent ce geste difficile. Sur Android, les gestes de zoom s'en chargent. Ces outils fonctionnent même en dehors du navigateur.
Qu'en est-il des navigateurs plus anciens ?
FastClick de FT Labs utilise des événements tactiles pour déclencher des clics plus rapidement et supprime le geste de double-clic. Il examine la distance parcourue par votre doigt entre touchstart et touchend pour différencier les défilements et les pressions.
Ajouter un écouteur touchstart à tout a un impact sur les performances, car les interactions de niveau inférieur telles que le défilement sont retardées en appelant l'écouteur pour voir s'il event.preventDefault(). Heureusement, FastClick évite de définir des écouteurs lorsque le navigateur supprime déjà le délai de 300 ms. Vous bénéficiez ainsi du meilleur des deux mondes.