Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Pagination
Ce motif de recette présente le modèle de navigation utilisé pour afficher une pagination, permettant à l'utilisateur·ice de naviguer entre différentes pages de contenu, comme des résultats de recherche.
Exigences
Le motif de pagination affiche généralement les éléments sur une ligne. Pour garantir que la pagination soit compréhensible par les personnes utilisant un lecteur d'écran, on marque les éléments comme une liste à l'intérieur d'un élément HTML<nav>, puis on utilise le CSS pour présenter la disposition visuellement en ligne.
En général, le composant de pagination est centré horizontalement sous le contenu.
Recette
Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour modifier l'exemple dans le MDN Playground :
<nav aria-label="pagination"> <ul> <li> <a href=""> <span aria-hidden="true">«</span> <span>ensemble de pages précédent</span> </a> </li> <li> <a href=""><span>page </span>1</a> </li> <li> <a href="" aria-current="page"> <span>page </span>2 </a> </li> <li> <a href=""> <span>page </span>3 </a> </li> <li> <a href=""> <span>page </span>4 </a> </li> <li> <a href=""> <span>ensemble de pages suivant</span ><span aria-hidden="true">»</span> </a> </li> </ul></nav>.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;}nav { border-top: 1px solid #eeeeee; margin-top: 1em; padding-top: 0.5em; font: 1.2em sans-serif; display: flex; justify-content: center;}.pagination { list-style: none; margin: 0; padding: 0; display: flex;}.pagination li { margin: 0 1px;}.pagination a { display: block; padding: 0.5em 1em; border: 1px solid #999999; border-radius: 0.2em; text-decoration: none;}.pagination a[aria-current="page"] { background-color: #333333; color: white;}Choix effectués
Ce motif utilise lamise en page flexible — un conteneur flexible imbriqué dans un autre. L'élément<nav> est défini comme conteneur flexible afin de pouvoir centrer la liste à l'intérieur grâce à la propriétéjustify-content.
La liste elle-même devient aussi un conteneur flexible pour disposer les éléments sur une ligne. Pour espacer les éléments, on peut soit utiliser unmargin sur les éléments flexibles, soit ajouter ungap sur le conteneur flexible.
.pagination { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px;}Problèmes d'accessibilité
Nous voulons nous assurer qu'une personne utilisant un lecteur d'écran comprenne le rôle de cette navigation et où elle mènera en cliquant sur un lien. Pour cela, nous avons ajoutéaria-label="pagination" sur l'élément<nav>.
Nous avons également ajouté du contenu supplémentaire qui sera lu par un lecteur d'écran mais caché visuellement, et appliqué l'attributaria-hidden sur les flèches de pagination.
La section « Voir aussi » à la fin de ce document propose des liens vers des sujets d'accessibilité connexes.