Pagination - Pagination

La pagination permet à l’utilisateur de naviguer entre les différentes pages d’une liste d'éléments.

Lorsqu’une liste d'éléments est trop importante pour être affichée sur une seule page (plus de 20 éléments) il est préférable de la diviser en plusieurs pages. La pagination est un système de navigation entre ces différentes pages et elle simplifie le parcours à l’utilisateur au sein de cette liste.

En fonction de la technologie utilisée pour votre site, la pagination peut avoir des fonctionnements spécifiques. Afin de respecter cette contrainte nous vous proposons uniquement un style de référence (UI et HTML/CSS), l’ensemble des éléments permettant de s’approprier ce style ainsi qu’une liste de bonnes pratiques à respecter.

                <nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first" aria-disabled="true" role="link">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" aria-disabled="true" role="link">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" aria-current="page" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" href="#">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last" href="#">
                Dernière page
            </a>
        </li>
    </ul>
</nav>
                
              

L’implémentation de la pagination doit respecter les bonnes pratiques suivantes :

  • La pagination est toujours placée en bas de liste
  • La page sur laquelle se trouve l'utilisateur doit être clairement mise en avant
  • Le dernier élément de la pagination est la dernière page de la liste. L’utilisateur connait ainsi le nombre total de pages.
  • Le lien “précédent” doit être désactivé quand l’utilisateur est sur la première page, et la page “suivant” quand l’utilisateur est sur la dernière page.
  • Toujours donner un accès rapide à la première et dernière page lorsque celles-ci ne sont pas actives, soit avec les boutons “I<“ et “>I”, soit avec la page “1” et la dernière page.
  • Il est recommandé de limiter à 5 ou 7 le nombre de page visibles et affichées par défaut dans la pagination. Au-delà les autres pages sont masquées par un système de troncature. La troncature est matérialisée par l’icône “…” : il ne s’affiche que quand le nombre de pages dépasse de la liste est supérieur à la limite fixée.
  • Par défaut nous recommandons d’afficher la troncature “…” : après la 5ème page sur les grandes et moyennes résolutions
  • La double troncature apparait lorsque la page consultée est séparée par 5 pages ou plus de la première et de la dernière page sur les grandes et moyennes résolutions

Pagination sur mobile et tablette

  • Le fonctionnel doit rester le même entre mobile et desktop.
  • Limiter le nombre de pages affichées pour pouvoir afficher dans l’idéal les éléments de la pagination sur une ligne.
  • Privilégier les icônes “<“ et “>” pour les actions “précédent” et “suivant”
  • Réduire le nombre de page au niveau des règles d’affichage de la troncature afin d’afficher les éléments de la pagination sur une ligne.

Règles d’utilisation

Usage

  • Privilégier la pagination au lieu d’un rechargement automatique ou d’un bouton “voir plus” (pour faciliter le parcours et avantager le référencement de votre site).
  • Au clic sur une nouvelle page renvoyer l’utilisateur en haut de la page
  • Conserver le même fonctionnel entre les grandes et petites résolutions, en adaptant les règles d’affichage

Accessibilité

Les règles d’accessibilité sur la pagination :

  • Identifiez clairement qu’il s’agit d’un élément de navigation. Exemple : <nav class=”ma classe” role=”navigation” aria-label=”Pagination”>
  • L’item actif doit être indiqué clairement dans le code. Par exemple : <li aria-current="page">5</li>
  • Utiliser un texte caché et un title sur les liens présentés sous forme d'icône ("page précédente" et "page suivante", “première page”, “dernière page”)
  • Les liens désactivés n’ont pas d’attribut href, et possèdent les attributs aria-disabled="true" role="link"

Personnalisation

Ce composant n’est pas personnalisable.

Besoin d'aide ?

L'équipe du DSFR est là pour vous aider.

Retrouvez-la sur :