Pagination

Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

Links to sets of pages in a paged listing

Spécifications sommaires

Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément <nav> et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.

Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.

Recette

Choix effectués

Pour obtenir ce résultat, on utilise les boîtes flexibles avec une conteneur flexible imbriqué dans un autre. L'élément <nav> est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété justify-content.

La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété margin pour espacer les éléments entre eux.

Méthodes alternatives

Lorsque la propriété column-gap sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.

.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  column-gap: 2px;
}

Accessibilité

Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute aria-label="pagination" sur l'élément <nav>.

On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut aria-hidden sur les flèches de pagination.

Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.

Compatibilité des navigateurs

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

justify-content

BCD tables only load in the browser

column-gap in Flex layout

BCD tables only load in the browser

Voir aussi