Pagination
<gcds-pagination>

Autres noms : index de pages, navigation de pages.

La pagination est un composant de navigation qui répartit un contenu sur plusieurs pages liées.

• GitHub
• Figma

Structure de la pagination

Structure de la pagination simple

1. Le lien précédent mène vers la page précédente dans la séquence lorsqu’il est sélectionné.
2. Le chevron précédent est une aide visuelle qui indique qu’on navigue en arrière dans la séquence de pages.
3. Le texte Précédent est le texte qui accompagne le chevron précédent. Il indique qu’une personne naviguera vers la page précédente dans la séquence.
4. Le libellé de la page précédente fournit un contexte sur la page vers laquelle une personne reviendra.
5. Le lien suivant mène vers la page suivante dans la séquence lorsqu’il est sélectionné.
6. Le chevron suivant est une aide visuelle qui indique qu’on navigue en avantdans la séquence de pages.
7. Le texte Suivant est le texte qui accompagne le chevron suivant. Il indique que la personne naviguera vers la page suivante dans la séquence.
8. Le libellé de la page suivante fournit un contexte sur la page vers laquelle une personne naviguera ensuite.

Structure de la pagination sous forme de liste

Écrans de grande taille

1. Le lien précédent mène vers la page précédente dans la séquence lorsqu’il est sélectionné.
2. Le chevron précédent est une aide visuelle qui indique qu’on navigue en arrière dans la séquence de pages.
3. Le texte Précédent est le texte qui accompagne le chevron précédent. Il indique qu’une personne naviguera vers la page précédente dans la séquence.
4. Un lien de page mène vers la page correspondante dans la séquence.
5. La page actuelle indique la page sur laquelle la personne se trouve actuellement.
6. Les points de suspension remplacent toutes les pages qui ne s’affichent pas.
7. Le texte Suivant est le texte qui accompagne le chevron suivant. Il indique que la personne naviguera vers la page suivante dans la séquence.
8. Le chevron suivant est une aide visuelle qui indique qu’on navigue en avantdans la séquence de pages.
9. Le lien suivant mène vers la page suivante du flux lorsqu’il est sélectionné.

Écrans de petite taille

1. Un lien de page mène vers la page correspondante dans la séquence.
2. La page actuelle indique la page sur laquelle la personne se trouve actuellement.
3. Les points de suspension remplacent toutes les pages qui ne s’affichent pas.
4. Le lien précédent mène vers la page précédente dans la séquence lorsqu’il est sélectionné.
5. Le chevron précédent est une aide visuelle qui indique qu’on navigue en arrière dans la séquence de pages.
6. Le texte Précédent est le texte qui accompagne le chevron précédent. Il indique qu’une personne naviguera vers la page précédente dans la séquence.
7. Le texte Suivant est le texte qui accompagne le chevron suivant. Il indique que la personne naviguera vers la page suivante dans la séquence.
8. Le chevron suivant est une aide visuelle qui indique qu’on navigue en avant dans la séquence de pages.
9. Le lien suivant mène vers la page suivante dans la séquence lorsqu’il est sélectionné.

Design et accessibilité pour le composant pagination

Rendez le contenu de la pagination facile à trouver

• Placez les informations les plus importantes sur les premières pages afin qu’elles soient plus visibles.
• Placez le composant de pagination immédiatement sous le contenu de la page, aligné à gauche.
• Affichez les liens de navigation de manière à favoriser le balayage visuel :
  • sur une seule ligne, sans retour à la ligne, pour la pagination en liste;
  • empilés verticalement, pour aider les personnes utilisant un logiciel d’agrandissement d’écran, dans le cas de la pagination simple.

Aidez les personnes à comprendre où elles se trouvent

• Dans la pagination simple, utilisez un libellé sous les textes « Précédent » et « Suivant » pour indiquer la position de l’utilisateur dans la séquence. Incluez soit le titre de la page, soit le numéro de page par rapport au nombre total de pages afin de fournir un contexte sur les pages adjacentes.
• Évitez d’afficher le lien « Précédent » sur la première page ou le lien « Suivant » sur la dernière page.

Affichez un nombre approprié de pages

Dans la pagination sous forme de liste, affichez suffisamment de liens de pages pour remplir l’espace horizontal disponible.

Affichez toujours :

• la page actuelle;
• la première et la dernière page;
• les pages immédiatement avant et après la page actuelle.

Sur les écrans plus grands, affichez des pages supplémentaires avant et après la page actuelle lorsque l’espace le permet.