Délai de pression de 300 ms, disparu

Jake Archibld
Jake Archibald

Pendant de nombreuses années, les navigateurs mobiles ont appliqué un délai de 300 à 350 ms entre touchend et click, le temps qu'ils attendaient de voir s'il s'agissait d'un double appui ou non. En effet, appuyer deux fois était un geste pour zoomer sur le texte.

Depuis la première version de Chrome pour Android, ce délai a été supprimé si le zoom par pincement était également désactivé. Toutefois, le zoom par pincement est une fonctionnalité d'accessibilité importante. Depuis Chrome 32 (en 2014), ce délai est écoulé pour les sites optimisés pour les mobiles, sans avoir à supprimer le zoom par pincement. Firefox et IE/Edge ont fait la même chose peu de temps après et en mars 2016, un correctif similaire a été intégré dans iOS 9.3.

La différence de performances est énorme !

Grâce à une interface utilisateur qui répond instantanément, 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 du temps de réaction manuel et des performances Web, consultez notre présentation du RAIL.

Pour supprimer le délai d'appui de 300 à 350 ms, il vous suffit de procéder comme suit dans la <head> de votre page:

<meta name="viewport" content="width=device-width">

La largeur de la fenêtre d'affichage est ainsi 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 partent du principe que vous avez rendu le texte lisible sur mobile. La fonctionnalité permettant d'appuyer deux fois pour zoomer est abandonnée au profit d'un clic plus rapide.

Si, pour une raison quelconque, vous ne pouvez pas effectuer cette modification, vous pouvez utiliser touch-action: manipulation pour obtenir le même effet sur la page ou sur des éléments particuliers:

html {
    touch-action: manipulation;
}

Cette technique n'est pas compatible avec Safari. Il est donc préférable d'utiliser la balise de fenêtre d'affichage.

La perte d'appui deux fois pour zoomer 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 ont des difficultés à effectuer ce geste. Sur Android, les gestes d'agrandissement s'en chargent. De tels outils fonctionnent même en dehors du navigateur.

Qu'en est-il des navigateurs plus anciens ?

FastClick by FT Labs utilise les événements tactiles pour déclencher des clics plus rapidement et élimine le geste d'appui deux fois. Elle analyse la quantité de mouvements de votre doigt entre touchstart et touchend pour différencier les défilements et les appuis.

L'ajout d'un écouteur touchstart à tous les éléments 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 renvoie des event.preventDefault(). Heureusement, FastClick évite de définir des écouteurs lorsque le navigateur supprime déjà le délai de 300 ms, ce qui vous permet de profiter pleinement des deux !