Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

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.

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?

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

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)

  • No labels