La plage d'affichage permet à l'utilisatrice ou à l'utilisateur de choisir le nombre d'éléments qu'elle ou il souhaite afficher dans une liste de données.

Utilisation

La plage d'affichage est utilisée dans toutes les listes de données dynamiques qui se trouvent dans le site.

Utilisation en format bureau

En format bureau, la plage d'affichage est positionnée à droite, juste au-dessus de la liste de données. Lors du chargement de la page, c'est toujours la plus petite plage disponible qui s'affiche par défaut, soit généralement une plage de 20 éléments. Toutefois, en cliquant sur le menu déroulant, l'utilisatrice ou l'utilisateur peut choisir d'afficher une plus grande plage de résultats, soit 50, 100 ou encore tous les éléments de la liste.

La plage d'affichage accompagne toujours l'indicateur de résultats.

Utilisation en format mobile

En format mobile, le menu déroulant se transforme en bouton secondaire positionné sous la liste de données. À chaque fois qu'une ou un internaute défile 10 éléments dans la liste, elle ou il doit de nouveau cliquer sur le bouton Afficher plus de résultats pour afficher 10 éléments de plus.

Comportement

En format bureau,

• le menu déroulant offre toujours les mêmes plages d'affichage dans toutes les listes de données, peu importe le nombre d'éléments disponibles;
• le nombre d'éléments affichés par page s'ajuste chaque fois qu'une ou un internaute sélectionne une nouvelle plage d'affichage;
• la pagination sous la liste de données s'ajuste selon la plage sélectionnée;
• si un tri est appliqué sur l'une des colonnes de la liste, celui-ci est conservé;
• si un ou des filtres sont appliqués sur la liste, ceux-ci restent actifs;
• chaque fois que l'internaute change la plage d'affichage, elle ou il est ramené automatiquement à la première page de la liste.

Accessibilité

Voici quelques règles d'accessibilité que doit respecter le sélecteur de plage d'affichage :

• la liste déroulante du sélecteur de plage d'affichage doit pouvoir être en mode focus lorsque l'utilisatrice ou l'utilisateur navigue au moyen du clavier;
• lorsque la liste déroulante est en mode focus, la valeur sélectionnée courante doit être lue par le lecteur d'écran;
• la touche d'entrée ou la barre d'espace permettent à l'utilisatrice ou à l'utilisateur d'accéder aux options de la liste déroulante, et les flèches vers le haut et vers le bas du clavier sont utilisées pour choisir une option dans la liste;
• chaque option de la liste doit être lue lorsqu'elle est survolée, et l'utilisatrice ou l'utilisateur peut indiquer son choix en appuyant sur la touche d'entrée ou la barre d'espace de son clavier.

Libellé

En format bureau, le libellé utilisé dans toutes les listes relativement au sélecteur de plage d'affichage est « Affichage ». En anglais, on utilise le terme Show .