Je me suis récemment arrachée les cheveux sur un problème de navigation dans des galeries photos jQuery sur certains périphériques et avec un navigateur en particulier : Google Chrome. Il s’avère que le fond du problème est la mauvaise utilisation de la détection d’un périphérique tactile. Je vais donc vous expliquer pourquoi.
Galleria, une galerie photo jQuery responsive
Dans mes intégrations, j’ai eu, de nombreuses fois, à utiliser le plugin jQuery de galerie photos (ces slides qui bougent sans cesse et qui agacent plus qu’autre chose) Galleria.
Un jour, je me suis rendue compte que la version 1.2.8 de Galleria rendait impossible la navigation dans les galeries lorsqu’on utilisait les navigateurs par défaut des tablettes et smartphones Samsung (à vérifier sur d’autres modèles). J’ai donc mis à jour le plugin vers la version 1.3.5. Ça fonctionne, plus de problème. Oui mais…
La détection d’un périphérique tactile : touch / no-touch et le service Tablet PC de Windows
Il se trouve aussi que, sur certains ordinateurs portables Asus, un nouveau problème se pose : on ne peut plus naviguer dans les galeries avec ces ordinateurs et le navigateur Google Chrome. Chose qui ne posait pas de problème avec la version 1.2.8.
Allez hop, F12, affichage de l’outil de développement de Chrome et, en parallèle, de Firefox… Je découvre alors deux choses :
- dans Firefox, Modernizr dit touch, Galleria dit notouch,
- dans Chrome, Modernizr dit touch, Galleria dit touch.
Après moult recherches, il s’est avéré que, dans ces ordinateurs, un service Windows appelé « Tablet PC » était activé alors même qu’ils ne sont absolument pas tactiles (pour le pad donc, sans doute). Windows renvoie donc l’information que le périphérique est tactile mais le navigateur, à priori, ne renvoie pas forcément la même information. Par ailleurs, Modernizr et Galleria ne vont pas chercher l’information de la même façon.
Désactivation et arrêt du service Tablet PC et tout rentre dans l’ordre, la navigation fonctionne à nouveau. Petit problème cependant, un peu plus tard, le problème est revenu, probablement dû à une mise à jour Windows qui touchait ce service. Il a donc fallu réactiver le service avant de le re-désactiver. Oui, mais… (deuxième)
Détecter le tactile : oui, mais sans bloquer les fonctionnements à la souris
Cela signifie que Galleria dit : Si tu n’es pas un périphérique tactile, active la navigation classique, si tu es un périphérique tactile désactive la navigation classique et active la navigation tactile.
Voyez-vous le problème ? Hé oui, comment ça se passe sur les périphériques tactiles auxquelles on peut greffer une souris, comme les tablettes Surface par exemple ? Hé bien, la navigation à la souris ne fonctionne pas.
Alors, quelle solution ?
Galleria n’est, malheureusement, pas la seule galerie à fonctionner de cette façon. Il faut donc trouver une autre solution, d’autres galeries qui n’utilisent pas cette « mauvaise détection ». BxSlider et Cycle 2 semblent être deux solutions plus que convenables.
Alors, s’il vous plaît, développeurs et développeuses, créez des scripts (de galeries, ou pas) qui améliorent l’expérience utilisateur avec un écran tactile oui, mais sans pénaliser les autres : ceux qui n’ont pas d’écran tactile mais qui renvoie cette information quand même, ceux qui ont des tablettes auxquelles on peut ajouter un clavier et une souris, etc.
Réfléchissez large ;-)
P.S. de 2018 : Il conviendra également, bien sûr, de vérifier que la navigation au clavier fonctionne et que les galeries sont accessibles aux personnes handicapées et leurs technologies d’assistance. Pour cela, se référer aux référentiels RGAA et WCAG.