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 |
|
|
Anatomie
Élément | Description et interactions |
Fond |
|
Titre |
|
Progression Pagination (points de progression, numérotation, barre de défilement, etc.) |
|
Cartes |
|
Panneau ou ensemble de cartes |
|
Navigation |
|
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.
Navigation au clavier
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? |
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).
Ressource
Accessible Mobile Carousels - Mobile Office Hours (McMeeking. 2019)
Understanding Success Criterion 2.5.1: Pointer Gestures (W3C)
Annexe
Dernière modification
| Mise à jour des informations de navigation clavier sur les rails avec carte non actionnable |
| Révision de l'accessibilité par Véronique Leclerc |
| Mise à jour avec WCAG 2.1 pour les contrôles sur mobile (web/applications) |