Guides pratiques

Choisir et tester un carrousel ou une galerie d’images

Un carrousel montre successivement une partie d’un ensemble. Une galerie montre plusieurs éléments simultanément. Le choix dépend de la tâche : regarder une série, comparer des détails ou retrouver une photographie précise. L’animation n’apporte pas, à elle seule, une meilleure compréhension.

Voir la méthode

Appareil photo, objectif et carnet sur une table en bois
Illustration

Comparer avec une galerie visible

Recensez le nombre de visuels et leur rôle. Pour comparer trois vues d’un produit, une galerie avec légendes peut éviter des changements répétés. Si la série est longue, des vignettes ou une liste permettent de choisir plus directement qu’une suite de boutons « suivant ».

Gardez hors rotation le titre, la proposition principale et l’accès au contact. Une information décisive ne doit pas dépendre du moment où l’on regarde la page. Évaluez le recadrage des images et la fidélité de la présentation, particulièrement lorsqu’un détail peut modifier une décision d’achat.

Laisser le lecteur contrôler le mouvement

Le modèle de carrousel W3C prévoit des commandes compréhensibles et un contrôle de la rotation automatique. Cette rotation s’arrête lorsque le focus entre dans le composant et ne repart pas sans demande explicite. Le critère pause, arrêt ou masquage précise les conditions applicables aux contenus en mouvement.

Une rotation manuelle constitue souvent un point de départ plus simple. Testez le bouton suivant sans déplacer inutilement le focus. Le contenu masqué ne doit pas laisser des liens invisibles dans le parcours au clavier. Un geste de balayage peut compléter des commandes visibles, pas devenir l’unique moyen de parcourir les images.

Associer médias, légendes et performance

Chaque vue doit conserver sa légende, son texte alternatif adapté au contexte et ses droits. Ne présentez pas une image d’illustration comme la photographie d’une réalisation. Vérifiez que le changement de vue met à jour le bon texte et qu’un recadrage sur téléphone ne masque pas l’objet décrit.

Chargez les variantes adaptées à l’affichage et réservez les dimensions. Un carrousel de douze images ne devrait pas obliger à télécharger douze grands fichiers avant de lire la page. Contrôlez l’image initiale, le passage à la suivante et les erreurs de média sans laisser un cadre vide inexpliqué.

Exemple : montrer trois détails d’un objet

Exemple pédagogique : une boutique montre face, dos et détail de fermeture avec des légendes. Une galerie de vignettes est comparée à un carrousel manuel. Le test demande de retrouver la fermeture puis de revenir à la vue générale au clavier et sur téléphone. Les observations servent à choisir la présentation, sans inventer un gain de conversion.

Contenu mis à jour le 7 octobre 2026

Matrice de recette à adapter au projet

Ces contrôles proposés utilisent des cas fictifs. Décidez du comportement attendu avec l’équipe, notez le résultat et attribuez les écarts non résolus avant publication.

Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

Cas de test, résultats attendus et preuves utiles
CasRésultat attenduPreuve à conserver
Défilement au clavierChaque vue est atteignable par une commande nomméeTouches et position affichée
Vue masquéeAucun lien invisible ne reçoit le focusOrdre de tabulation
Image et légendeLes informations désignent le même visuelCapture de chaque vue
Réseau lentLe lecteur peut comprendre la page avant la série complètePoids transféré et état de chargement

Questions fréquentes

Le carrousel doit-il démarrer automatiquement ?

Ce n’est pas nécessaire pour présenter une série. Un parcours manuel peut donner davantage de contrôle et réduire le nombre de comportements à gérer.

Les petits points sous l’image suffisent-ils ?

Leur rôle et leur destination doivent être compréhensibles. Ajoutez des commandes utilisables et vérifiez qu’une personne au clavier peut atteindre la vue souhaitée.

Une galerie peut-elle ouvrir une vue agrandie ?

Oui, mais l’agrandissement doit aussi prévoir fermeture, nom et retour du focus. Le guide sur les dialogues complète ce contrôle.