Nouveau Components

Pagination

La pagination est un outil utilisé pour naviguer au sein d’un contenu étendu réparti sur plusieurs pages. Généralement placée en bas d’une page, elle propose des liens permettant de passer aux pages suivante, précédente, numérotées, et parfois aux premières ou dernières pages. Elle facilite ainsi l’accès à de larges ensembles de contenus et améliore l’expérience utilisateur ainsi que l’ergonomie.

Quand l’utiliser

  • Division du contenu : Utiliser la pagination pour découper un contenu long ou un ensemble important de données en pages distinctes et plus faciles à gérer.
  • Navigation utilisateur : Recourir à la pagination pour faciliter la navigation entre différentes sections ou pages de contenu, notamment sur les sites d’e-commerce, les résultats de recherche ou les blogs.

Quand ne pas l’utiliser

  • Contenu limité : Éviter la pagination lorsque le contenu ou les données sont peu nombreux et peuvent être affichés efficacement sur une seule page.
  • Pages à défilement infini : Ne pas utiliser de pagination sur les pages conçues avec un défilement infini, où le contenu se charge automatiquement au fur et à mesure que l’utilisateur fait défiler la page.

Modes d’action

  • Interaction à la souris : Veiller à ce que les liens de pagination réagissent visuellement aux interactions de la souris, par exemple grâce à un changement de couleur, un soulignement ou une mise en surbrillance, afin d’indiquer qu’ils sont cliquables.
  • Accessibilité clavier : La pagination doit être entièrement accessible au clavier, permettant aux utilisateurs de naviguer entre les pages avec la touche Tab et de sélectionner une page avec la touche Entrée. Indiqué le focus du clavier de façon claire et visible.

Accessibilité pour les lecteurs d’écran

  • Identification claire : Identifier clairement les éléments de pagination pour les lecteurs d’écran, notamment en utilisant des libellés ARIA ou des repères afin d’indiquer leur rôle en tant qu’outils de navigation entre les pages.
  • Indication de la page actuelle : Utiliser des attributs ARIA ou d’autres méthodes pour signaler la page actuellement affichée, afin d’aider les utilisateurs à comprendre leur position dans l’ensemble des pages.

Contenu

  • Libellés concis : Utiliser des libellés de pagination courts, généralement des chiffres ou des termes simples comme « Suivant » et « Précédent ».
  • Page actuelle visible : Mettre clairement en évidence le numéro de la page en cours afin qu’il se distingue des autres.
  • Affichage équilibré : Présenter un ensemble équilibré de numéros de pages autour de la page actuelle, sans surcharger l’utilisateur avec trop d’options.
  • Design responsive : Veiller à ce que le composant de pagination s’adapte aux différents formats d’écran, tout en conservant lisibilité et facilité d’utilisation.

Sur cette page

Mots-clés

  • Pagination : méthode de navigation qui permet aux utilisateurs d’accéder à différentes pages de contenu, soit de manière séquentielle, soit directement.

Fonctionnalités essentielles d’accessibilité

  • Repère de navigation : Utiliser la balise <nav> pour définir le composant comme un repère de navigation.
  • Libellé ARIA : L’attribut aria-label="Pagination" appliqué à l’élément <nav> identifie clairement la fonction du composant de pagination.
  • Noms de navigation uniques : Si plusieurs zones de navigation sont présentes sur la page, chacune doit disposer d’un aria-label unique.
  • Guillemets invisibles pour les lecteurs d’écran : Les chevrons («, ‹, ›, ») utilisés dans les liens « Première », « Précédent », « Suivant » et « Dernière » sont masqués aux lecteurs d’écran grâce à <span aria-hidden="true">. Cela limite la vocalisation tout en conservant les repères visuels pour les utilisateurs voyants.
  • Indication de la page actuelle : La page active est indiquée avec aria-current="page" pour signaler aux lecteurs d’écran qu’il s’agit de la page sélectionnée.
  • Texte caché pour les icônes : Pour les liens représentés par des icônes ou symboles, du texte caché (dans un <span aria-hidden="true">) et des attributs title fournissent un contexte aux utilisateurs de lecteurs d’écran.
  • Amélioration du contexte vocalisé : Pour donner davantage de contexte aux lecteurs d’écran, il est possible d’ajouter un texte visuellement masqué grâce à une classe telle que sr-only. Exemple : insérer <span class="sr-only">Page </span> dans chaque lien. Avec cette modification, un lecteur d’écran annoncera « Page 1 lien», « Page 2 lien», etc., offrant une meilleure compréhension à l’utilisateur.

Sur cette page

Accordion keyboard navigation function table
Touche Fonction
Espace/Entrée Déplace le focus vers la gauche.
Tab Déplace le focus vers la droite.
Shift + Tab Valider la sélection.

Aperçu

La démo en version mobile sera disponible prochainement. Dans l'attente, nous vous invitons à consulter la démo en version Desktop.