Carrousel d'entête

Un carrousel d'entête permet de présenter une liste d’éléments sous une forme défilante à l'horizontal.

Le carrousel d'entête est une façon de mettre en avant du contenu dans un même composant, de façon succincte et compacte. Le carrousel donne un aperçu d’un concept, d’une idée, d’une section à travers une liste de contenu et sert de relai sur des pages plus complètes où l’utilisateur va retrouver plus de détails et plus de contenu.

Alias hero, slideshow

Avantages

Inconvénients

Fort aspect introductif
Aperçu de l’offre sans rentrer en profondeur dans le site et mise en avant de contenu nécessitant une attention spéciale (En vedette, En exclusivité…)
Immersion lorsque des grosses images sont utilisées ou encore des vidéos (Showreel…)
Gain de place de part son aspect condensé/compact dans la page
Solution marketing pour dissiper toute querelle interne sur le contenu le plus méritant
Bonne manière pour illustrer une ligne de temps, une histoire (Storytelling)

Performance et visibilité diminuées dans les pages différentes de la première
Étude à l’appuie, forte tendance à l’ignorance quant à la popularité et l’utilisation de ce genre de composant
Enjeux d’accessibilité, nécessitant de complexifier le fonctionnement du carrousel (ajout de boutons, confusion dans le focus, navigation dans une navigation…)
Peut devenir un fourre-tout autant dans le nombre de contenus que le type de contenu
Perception différente entre le designer qui voit un ensemble de contenu et l’utilisateur qui lui ne voit qu’un contenu à la fois. Perte dans une vision globale de ce que pourrait vouloir communiquer le contenu du carrousel (Example: moodboard dans un carrousel).

Anatomie

Générale

Élément	Description et interactions
Carte et son contenu	Une seule carte à la fois. Le contenu de la carte (titre, description et appel à l'action) est libre et facultatif.
Navigation	Boutons permettant de passer d'un panneau à un autre dans le carrousel Lorsque le loop est désactivé, griser ou cacher le bouton « Précédent » au début du carrousel et « Suivant » à la fin du carrousel.
Progression Pagination (points de progression, numérotation, etc.)	Les indicateurs interactifs de position dans le carrousel sont requis. L'indicateur de progression peut être interactif.
Bouton pause/relance (facultatif)	Seulement si le défilement automatique est disponible

Défilement automatique

Optionnel
Si un défilement automatique est activé,
un bouton de mise en pause (texte et/ou icône pause) et de relance (texte et/ou icône play) est requis (ref. 2.2.2 Mettre en pause, arrêter, masquer).
la durée recommandée est de 6 secondes par contenu,
dès qu'il y a survol, focus ou qu’une action est entreprise (par la flèche, la pagination) le défilement automatique se met en pause temporairement, mais le bouton pause ne change pas d'état.
si l'utilisateur se déplace hors du carrousel (survol, focus) et qu'il n'avait pas pauser le carrousel, le défilement automatique se relance.

Boucle

Optionnel

Comportements attendus

Navigation

Add

Ordinateur

Naviguer à l'aide de boutons (note 1).
Au clavier, naviguer de carte actionnable en carte actionnable (Voir tableau Navigation au clavier).
Au lecteur d'écran, naviguer de carte en carte (actionnable ou non)
S'il y a plus de 5 items dans la liste, possibilité de naviguer avec un lien d'évitement vers la fin du carrousel (et inversement).

Mobile (ou écran tactile)

Utiliser la gestuelle du swipe, glisser ou balayer pour défiler de droite à gauche.
Utiliser la gestuelle du touch, tap ou double tap pour naviguer à l'aide d'une deuxième option de navigation (note 1).
Au clavier, naviguer d'élément actionnable en élément actionnable (Voir tableau Navigation au clavier).
Au lecteur d'écran, pour une carte avec 1 action ou sans action, naviguer de carte en carte.
Avec une technologie d'assistance permettant de naviguer avec un curseur/pointeur, naviguer à l'aide d'une deuxième option de navigation (note 1).
Avec le contrôle vocal (note 2), naviguer à l'aide d'une deuxième option de navigation (note 1).

Navigation au clavier

Avec carte actionnable contenant 1 action

Touches	Actions
Tab (Entrée dans le carrousel)	Aller sur la première carte du carrousel
Tab	Passer d'une carte à une autre
Maj + Tab	Revenir d'une carte à une autre
Maj + Tab (Sortir du carrousel)	Revenir sur le composant précédent (Ex: élément de menu en haut à droite)
Entrée ↵ sur le lien d'évitement	Permet d'éviter le contenu du carrousel, et d'aller directement sur le prochain lien d'évitement (retour en haut du carrousel).
Entrée ↵	Ouvrir la carte
Flèche droite (facultatif)	Si le focus est sur un élément du carrousel, permet de naviguer au prochain panneau de droite et déplace le focus sur le premier élément cliquable du panneau.
Flèche gauche (facultatif)	Si le focus est sur un élément du carrousel, permet de naviguer au prochain panneau de gauche et déplace le focus sur le premier élément cliquable du panneau.

Avec carte actionnable contenant plusieurs actions

Par exemple, le carrousel d'entête de http://Tou.tv permet d'aller à la fiche émission et d'essayer l'extra, ou d'aller à la fiche d'émission et d'ajouter au favoris.

Touches	Actions
Tab (entrée dans le carrousel)	Aller sur le premier élément actionnable de la carte du carrousel
Tab (même carte)	Aller sur l'élément actionnable suivant
Tab (changement de carte)	Aller à la carte suivante et focus sur le premier élément actionnable.
Entrée ↵	Actionne le bouton focussé.
Maj + Tab (même carte)	Aller sur l'élément actionnable précédent
Maj + Tab (Changement de carte)	Aller à la carte précédente et focus sur le dernier élément actionnable.
Maj + Tab (Sortir du carrousel)	Revenir sur le composant précédent (Ex: élément de menu en haut à droite)

Libellé des liens d'évitement

	Lien d'évitement au début du carrousel	Lien d'évitement à la fin du carrousel
Syntaxe	Début de la liste [Identification du carrousel] "[Nom du carrousel] de [Nombre d'élément] [Identification des éléments]. Passer la liste?	Fin de la liste [Identification du carrousel] "[Nom du carrousel] de [Nombre d'élément] [Identification des éléments]. Retourner au début de la liste?
TOU.TV	Début de la liste "Populaires en ce moment" de 5 items. Passer la liste?	Fin de la liste "En vedette" de 5 items. Retourner au début de la liste?

Note 1 : Exemple d'options de navigation utilisant le curseur/pointer ou la gestuelle touch, tap ou double tap :

Flèches précédent et suivant;
Indicateur de progression actionable;
etc.

Note 2 : Voice Control permet de naviguer vocalement par nom (Show names) ou par numéro (Show numbers) d'éléments d'interface ou par une grille quadrillée (Show grid; une grille quadrillée et numérotée superposée à l'interface).

https://www.youtube.com/watch?v=eePfgI2TT_Q

Références

Annexe

-30-

https://developer.apple.com/documentation/accessibility/delivering_an_exceptional_accessibility_experience

Accessible Mobile Carousels - Mobile Office Hours (McMeeking. 2019)

The Carousel Problem - In a Nutshell

The typical User Experience of a Carousel is such that users feel free to ignore the minutiae of the Carousel's content when desirable. A Carousel represents size, scope and discovery.

Any user who is forced to engage with a sizable amount of Class 4 Content (the items within the carousel), before engaging with the Class 1 Content around it, is not getting the equivalent value.

(McMeeking. 2019)