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?
| Info |
|---|
Note 1 : Exemple d'options de navigation utilisant le curseur/pointer ou la gestuelle touch, tap ou double tap :
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). |
...
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Pour accéder à la dernière version de cette article, voir sur le portail de l'accessibilité : Meilleures pratiques en matière de l'accessibilité pour les caroussels |
Références
Annexe
...
-30-
...
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.
...
