Rails

Le rail est une façon de mettre en avant du contenu dans un même composant, de façon succincte et compacte. Le rail permet de regrouper des contenus qui ne sont pas listés ensemble nul par ailleurs sur le site (par exemple : À la une).

Alias card group, card layout, card list, conducteur, line up, swimlane

Avantages

Inconvénients

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é…)
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

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 rail (ajout d'une seconde navigation, 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 premier écran de contenu. Perte dans une vision globale de ce que pourrait vouloir communiquer le contenu du rail (Example: moodboard dans un rail).

Anatomie

Élément	Description et interactions
Fond	Couleur en arrière-plan du rail
Titre	Titre du rail (peut être masqué visuellement, mais doit exister dans la page). Le titre peut être un lien vers une section plus complète.
Progression Pagination (points de progression, numérotation, barre de défilement, etc.)	L'indicateur de progression donne deux informations : l'endroit où ce situe l'utilisateur, et le nombre d'élément dans la liste (restant et précédent). Peut être textuel (numérotation, par exemple : 4 sur 8 de 20 items) ou graphique, par exemple : points de progression, barre de défilement). Si la progression est interactive, elle permet de naviguer plus rapidement d'un contenu à l'autre (par exemple : par les points de progression, du premier au quatrième).
Cartes	Chaque contenu est représenté dans une carte. Maximum un élément tabulable par carte. Il n'y a aucune limitation sur le nombre de contenus total mais attention à ce que ça ne nuise pas à la performance de la page. L'objectif est d'afficher plusieurs cartes à la fois. L'aperçu des cartes précédente et suivante permet de montrer qu'il y a plus de contenus à consulter. Si on appuie sur la carte suivante, le rail avance vers le prochain ensemble de contenus (facultatif).
Panneau ou ensemble de cartes	Regroupements de cartes qui composent le rail. Le nombre de carte peut différer selon la résolution d'écran, et selon le contenu du rail.
Navigation	Si la navigation principale est le "swipe", ajouter une deuxième façon d'accéder aux contenus (note 1). Pour l'utilisation des boutons Précédent et Suivant, les icônes de flèches ou de chevron sont fortement recommandés. S'il y a lieu, désactiver ou cacher le bouton Précédent au début du rail et le bouton Suivant à la fin du rail.

Comportements attendus

Ordinateur

Avec le curseur, naviguer à l'aide de boutons (note 1).
Avec le curseur, naviguer avec la barre de défilement.
Au clavier, naviguer d'élément actionnable en élément 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 rail (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 de carte actionnable en carte actionnable (un contenu par carte).
Au lecteur d'écran, naviguer de carte en carte (actionnable ou non).
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).
L'aperçu des contenus avant et après, même sans boutons, peut servir à faire défiler le rail.

Avec carte actionnable (1 action par carte)

Touches	Actions
Tab (Entrée dans le rail)	Aller sur la première carte actionnable du rail
Tab	Passer d'une carte à une autre
Maj + Tab	Revenir d'une carte à une autre
Maj + Tab (Sortir du rail)	Revenir sur le composant précédent (Ex: élément de menu en haut à droite)
Entrée ↵ sur le lien d'évitement	Sortir du rail et aller sur le composant suivant
Entrée ↵	Ouvrir la carte
Flèche droite (facultatif)	Si le focus est sur un élément du rail, permet de naviguer au prochain ensemble de cartes ce trouvant vers la droite et déplace le focus sur le premier élément de cet ensemble.
Flèche gauche (facultatif)	Si le focus est sur un élément du rail, permet de naviguer au prochain ensemble de cartes ce trouvant vers la gauche et déplace le focus sur le premier élément de cet ensemble.

Avec carte non actionnable

Par exemple : Rail des résultats électoraux.

Touches	Actions
Tab (entrée dans le rail)	Aller sur le premier bouton de navigation (note 1).
Tab	Passer au bouton de navigation suivant.
Maj + Tab	Passer au bouton de navigation précédent.
Maj + Tab (sortir du rail)	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 rail

Lien d'évitement à la fin du rail

Syntaxe

Début de la liste [Identification du rail] "[Nom du rail] de [Nombre d'élément] [Identification des éléments]. Passer la liste?

Fin de la liste [Identification du rail] "[Nom du rail] de [Nombre d'élément] [Identification des éléments]. Retourner au début de la liste?

http://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?

Notes

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;
Lien Voir plus;
Changement d'affichage du rail en version vertical;
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

Ressource

Annexe

Exemple de rail avec : carte actionnable,flèches, nombre d'élément dans la liste et la position dans la liste avec la barre de défilement. ICI télé.

Dernière modification


`01/2023`	Mise à jour des informations de navigation clavier sur les rails avec carte non actionnable
`12/2022`	Révision de l'accessibilité par Véronique Leclerc
`03/2022`	Mise à jour avec WCAG 2.1 pour les contrôles sur mobile (web/applications)