Pagination

Bonne utilisation

Points de conformité :

• Utilisez .pagination pour numéroter les pages distinctes d'une section au contenu volumineux
• Assurez-vous que la pagination est toujours alignée à gauche
• Assurez-vous que les liens de navigation s'affichent sur une seule rangée et n'activez pas le retour à la ligne, à moins qu'il y ait une raison valide de le faire
• Ajoutez du texte invisible à l'aide de <span class"wb-inv"> pour rendre les liens descriptifs
• Assurez-vous qu'il y a un espace entre le numéro de pagination et <span class"wb-inv"> pour faire en sorte que les lecteurs d'écran puissent interpréter correctement le code
• Comprenez et mettez en œuvre les principes à l'appui connexes

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<ul class="pagination">
  <li><a href="#" rel="prev">Précédent</a></li>
  <li><a href="#">1 <span class="wb-inv">Aller à la page   1</span></a>
  <li><a href="#">2 <span class="wb-inv">Aller à la page   2</span></a></li>
  <li><a href="#" rel="next">Suivant</a></li>
</ul>

Bonne utilisation

Point d'observation :

• Utilisez .active pour indiquer la page actuelle où se trouve l'utilisateur dans la pagination

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<ul class="pagination">
  <li><a href="#" rel="prev">Précédent</a></li>
  <li class="active"><a href="#">1 <span class="wb-inv">(current) Aller à la page  1</span></a></li>
  ...
</ul>

Bonne utilisation

Point d'observation :

• Utilisez .disabled pour les liens non cliquables (cachés) à l'intérieur de la pagination

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<ul class="pagination">
  <li class="disabled"><a href="#" rel="prev">Précédent</a></li>
  <li><a href="#">1 <span class="wb-inv">Aller à la page  1</span></a></li>
  ...
</ul>

Bonne utilisation

Points de conformité :

• Taille par défaut : L'utiliser pour une pagination typique
• Petits boutons : Les utiliser lorsque la pagination apparaît dans un petit espace. Cela permet de réduire la taille des boutons afin de maximiser le nombre de boutons qui s'affichent dans une seule rangée
• Gros bouton : L'utiliser lorsque la pagination doit être plus évidente sur la page. Puisque les boutons par défaut assurent déjà une mise en évidence et un appel à l'action, l'augmentation de la taille de ces boutons est peu utile ou nécessaire

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Défaut :
<ul class="pagination">...</ul>

// Grand :
<ul class="pagination pagination-lg">...</ul>

// Petit :
<ul class="pagination pagination-sm">...</ul>

Bonne utilisation

Points de conformité :

• Utilisez .pager lorsqu'il faut seulement établir un lien avec la page « Précédent » ou « Suivant »
• Utilisez .previous et .next à l'intérieur des éléments <li> pour justifier entièrement les liens <ul class="pager"
• Comprenez et mettez en œuvre les principes à l'appui connexes

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

// Défaut :
<ul class="pager">
  <li><a href="#" rel="prev">Précédent</a></li>
  <li><a href="#" rel="next">Suivant</a></li>
</ul>

// Boutons de justification complète :
<ul class="pager">
  <li class="previous"><a href="#" rel="prev">Précédent</a></li>
  <li class="next"><a href="#" rel="next">Suivant</a></li>
</ul>

// État désactivé (« Précédent » caché) :
<ul class="pager">
  <li class="previous disabled"><a href="#" rel="prev">Précédent</a></li>
  <li class="next"><a href="#" rel="next">Suivant</a></li>
</ul>