Alias pagination numérotée, numérotation
La pagination permet de répartir les contenus appartenant à un même groupe sur plusieurs pages.
La pagination est une méthode de navigation qui permet de répartir les contenus appartenant à un même regroupement sur plusieurs pages et ainsi, réduire le temps de chargement initial de la page.
Sur les différents produits de Radio-Canada, les paginations se retrouvent dans les listes d'émissions, les listes de recettes, les pages d'indexation, les résultats de recherche, les horaires de chaînes.
La pagination numérotée est souvent la solution par défaut sur desktop lorsque l'on doit présenter une longue liste de contenus.
...
Avantages
...
Inconvénients
...
La pagination permet de segmenter les contenus.
La pagination permet de réduire la charge cognitive (dévoilement progressif, chunking).
La pagination offre une vue d'ensemble rapide sur la quantité de contenus disponibles.
La pagination réduit la hauteur de la page.
La pagination donne le contrôle de la navigation à travers les contenus à l'utilisateur.
La pagination est l'option la plus simple en termes de performance.
La pagination améliore le référencement des contenus qui ne sont pas visibles au premier chargement ou sur la première page.
La pagination permet d'accéder a du contenu hors liste de contenu (le pied de page par exemple).
...
La pagination ralentit la navigation, requiert plus d'efforts de l'utilisateur, ce qui influence l'engagement de l'utilisateur.
Dans le cas de la pagination avec numérotation n'a pas de valeur sémantique, contrairement à des regroupements ou des filtres par dates, sujets ou auteurs.
La vue d'ensemble, une quantité élevée de contenus, peut décourager l'utilisateur par rapport à la tâche à accomplir. Il se limite généralement à la première page.
La pagination avec menu déroulant n'est pas une option viable pour une grande quantité de pages.
Anatomie
...
Élément
...
Description et interactions
...
Pagination
Conteneur
...
Afficher le nombre d'éléments visibles à l'écran. Exemple : 41 à 60.
Afficher le nombre total d'éléments qui pourront être affichés (facultatif). Exemple : 41 à 60 sur 142.
En cas de délai à l'affichage des contenus, prévoir une animation d'attente, de progression ou de transition.
...
Personnalisation du nombre d'élément à afficher (facultatif)
...
Le nombre d'élément à afficher doit être proposé en valeur fixe (par exemple, une liste de valeur par saut de 10 dans un menu déroulant).
...
Première page
...
Page mitoyenne
...
Dernière page
...
Première page
...
Page mitoyenne
...
Dernière page
...
Élément
...
Description et interactions
...
Liens, boutons
Pagination numéroté
...
Pour une pagination numérotée, les liens vers les pages sont identifiés par leur numéro. Ces liens doivent être explicités par le lecteur d'écran et au survol. Par exemple :
Page {nb de la page}Les pages peuvent être accessibles par des liens
Deux flèches permettent d'aller aux pages précédente et suivante. Ces liens doivent être explicités par le lecteur d'écran et au survol. Par exemple :
Page {nb page suivante} (Page suivante).Lorsque le nombre de pages est élevé, certaines pages sont cachées sous les points de suspension (…, horizontal ellipsis).
Dans le cas où l'accès à la première et dernière page demande plusieurs actions utilisateur, les liens de la première et la dernière page doivent être visible que ce soit par leur numéro ou une icône de double flèche.
La zone interactive des liens (numéros et flèches) doit respecter la norme de 36 pixels (minimum en hauteur et en largeur) sur desktop et 48 pixels sur mobile. (ref. 2.5.5 Taille de la cible)
Le lien de la page courante doit être visuellement identifiable et nommé comme tel par le lecteur d'écran. Exemple :
Page {nb page courante} (Page courante)
...
Élément
...
Description et interactions
...
Menu déroulant
Pagination
...
Les pages peuvent être accessibles à partir d'un menu déroulant.
Deux flèches permettent d'aller aux pages précédente et suivante. Ces liens doivent être explicités par le lecteur d'écran et au survol. Par exemple :
{Date précédente} (Date précédente).La zone interactive du menu déroulant et des flèches doit respecter la norme de 36 pixels (minimum en hauteur et en largeur) sur desktop et 48 pixels sur mobile. (ref. 2.5.5 Taille de la cible)
La page active doit être l'élément sélectionné dans le menu déroulant.
...
Première page
...
Page mitoyenne
...
Dernière page
...
...
Élément
...
Description et interactions
Champs de saisie
Pagination
...
Les pages peuvent être accessible à la saisie d'un chiffre dans un champs texte.
Ne permettre que les chiffres au dessus de 1 dans le champs de saisie.
Afficher le nombre de page maximum. Exemple :
[input]/50 pagesLe chiffre par défaut dans le champ de saisie doit équivaloir au numéro de la page courante et ce, même si l'utilisateur n'a pas utilisé cette méthode pour changer de page. Exemple, si je suis à la page 4 de 50 après avoir actionné plusieurs fois la flèche suivant :
[4]/50 pages
Le nombre d'éléments à afficher par page dépendra de la nature de ces éléments. Chaque produit est libre de procéder à son propre découpage et définir ses règles par soit des tests de charge soit selon la taille visuelle des éléments. Cependant, le nombre d'éléments affichés par page devrait être le même sur toutes les pages de ce produit.
Spécificité pour mobile et les applications
Dans la mesure où la zone interactive minimale de 48 pixels pour les boutons est respectée sur mobile, il n'y a pas d'autres ajustements obligatoires.
Sur http://Radio-Canada.ca et Ohdio, la pagination est réduite à des liens vers la page courante, la page précédente ou suivante (flèche simple) et la première ou dernière page (flèche double). On cherche généralement à ce que la pagination tienne sur une seule ligne. Dans cet exemple, il aurait été possible d'intégrer un champ texte pour permettre à l'utilisateur de choisir une page spécifique.
Comportements attendus
Navigation
Au chargement de la nouvelle page, le focus se déplace sur un élément qui lui indique sa nouvelle position ou sa progression (le titre, le nombre d’items ou la section qui englobe la liste).
Les points de suspension sont ignorés au focus, et au lecteur d'écran et ne sont pas interactifs.
Dans le cas où l'on utilise le menu déroulant, s'assurer d'utiliser un menu déroulant natif pour que la navigation reste uniforme.
Dans le cas où l'on propose de choisir le nombre d'élément à afficher, s'assurer d'utiliser un menu déroulant natif.
À l'aide du clavier - Lien de la pagination
...
Touches
...
Actions
...
Tab
...
Navigue dans la pagination vers le lien de la page suivante ou l'élément suivant (par exemple, le champs de saisie).
...
Shift + Tab
...
Navigue dans la pagination vers le lien de la page précédente ou l'élément précédent (par exemple, le menu déroulant pour l'affichage du nombre d'élément).
...
Entrée et Espace
...
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Pour accéder à la dernière version de cette article, voir sur le portail de l'accessibilité : Meilleures pratiques en matière de l'accessibilité pour pagination |
Références
Alternatives to Pagination on Product-Listing Pages (NNG, 2022)
Infinite Scrolling: When to Use It, When to Avoid It (NNG, 2022)
Split the Contents of a Website with the Pagination Design Pattern (Interaction Design, 2020)
UI cheat sheet: pagination, infinite scroll and the load more button (UX Collective, 2020)
Annexe
Première page | Page mitoyenne | Dernière page | |
.ca Recherche |  |  |  |
Info Dossiers |  |  |  |
Mordu Recherche |  |  |  |
Ohdio Horaire |  |  |  |
Dernières modifications
12/2022
Révision accessibilité par Véronique Leclerc
21/04/2022