Pagination

Présentation

Module de pagination : division de l’affichage d’une page de résultats pour une recherche.

Il s’agit d’une pagination simple présentant par exemple les numéros des pages de résultats, avec, aux deux extrémités de cette liste, des liens permettant de naviguer vers la page précédente ou la page suivante. Si le nombre de pages est supérieur à 5, on peut placer un élément intermédiaire "...".

Accessibilité

Placer des attributs :

  • sur l’élément nav (aria-label="Pagination") ;
  • sur le lien conduisant vers la page précédente (title="page précédente") ;
  • sur le lien conduisant vers la page suivante (title="page suivante") ;
  • sur les liens conduisant à chaque page (title="page xxx").

Placer un texte caché sur l’item de la page active, grâce à la classe "sr-only".

Responsive

Sur petit écran, les liens conduisant vers la page précédente ou la page suivante n’affichent que le chevron, sans l’intitulé (qui est restitué par les synthèses vocales grâce au mixin sr-only).

Complément

Lors de l’intégration réelle, le lien "page précédente" doit être désactivé si l’on est sur la première page et le lien "page suivante" doit être désactivé si l’on est sur la dernière page.

Si l'on veut insérer une icône avec before ou after, il faudra placer l'icone dans un span portant l'attribut aria-hidden="true".

Exemple d’utilisation

<nav aria-label="page navigation" role="navigation">
  <ul class="pagination">
    <li class="page-item page-item-prev">
      <a class="page-link" href="#" title="page précédente">
        <span class="page-item-icon" aria-hidden="true"></span>
        <span>Précédent</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#" title="page 1">1</a></li>
    <li class="page-item active"><b class="page-link">2<span class="sr-only"> page actuelle</span></b></li>
    <li class="page-item"><a class="page-link" href="#" title="page 3">3</a></li>
    <li class="page-item"><a class="page-link" href="#" title="page 4">4</a></li>
    <li class="page-item"><a class="page-link" href="#" title="page 5">5</a></li>
    <li class="page-item page-item-next">
      <a class="page-link" href="#" title="page suivante">
        <span>Suivant</span>
        <span class="page-item-icon" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>

Démo