Pagination Cette page présente le composant de pagination pour les résultats de recherche. Description Pagination en affichage XL, LG et MD Sur la page 1 Le bouton Précédent est en mode inactif (gris) et le bouton Suivant est en mode actif (bleu). La navigation peut aussi s’effectuer en cliquant sur les numéros de chaque page. Lorsque le nombre de pages excède 9, les pages suivantes (ou précédentes, le cas échéant) sont symbolisées par des points de suspension (non-cliquables). Sur la page 3 Les boutons Précédent et Suivant sont tous les 2 en mode actif. Sur la page 9 Lorsque la page en cours contient plus de 4 pages avant ET plus de 4 pages après, la page en cours se positionne en plein centre de la liste de pages. Les 2 extrémités de la liste affichent des points de suspension. Pagination en affichage SM et XS Dans les plus petites résolutions d’écran, la navigation par page n’est pas offerte, seuls les boutons Précédent et Suivant et la page en cours sur le total de pages s’affichent. Le nombre de résultats par page est habituellement de 10. Si le nombre total de résultats n’excède pas 10, la pagination ne s’affiche pas. Voir des exemples Résultats de rechercheMédicaments couverts Accessibilité Quelques éléments sont à considérer pour une pagination accessible : L’ensemble La pagination doit se retrouver dans une balise <nav> possédant l’attribut aria-label="Pagination".Les numéros de page ainsi que les flèches précédente et suivante, si elles sont actives, doivent se retrouver dans une liste ordonnée <ol><li>.Il ne doit pas y avoir d’attribut role="presentation" sur l’élément de liste (li) contenant le « … »Un texte hors écran contenant le message « Autres pages de résultats non affichées » se retrouve à l’intérieur de l’élément de liste (li) « … ». Numéros de page Il ne doit pas y avoir d’attributs title sur les liens.Un texte hors écran précède le numéro de page, afin que le lecteur d’écran annonce « Page (n) ».Un texte hors écran précède le numéro de la page courante, afin que le lecteur d'écran annonce « Page courante (n) » Flèches précédente et suivante Il ne doit pas y avoir d’attributs title sur les liens.Un texte hors écran "Page précédente" ou "Page suivante" se retrouve à l’intérieur de la balise lien <a> des flèches actives précédente et suivante.S’assurer que le texte hors écran n’est pas en display:none.Le symbole de flèche pour les flèches précédente et suivante se retrouve dans une balise <span> possèdant l’attribut aria-hidden="true". SM et XS Pour la pagination en affichage SM et XS, la seule différence est qu’il n’y a pas besoin de texte hors écran pour les numéros de page, et les numéros de page se retrouvent dans le code après les flèches précédente et suivante.
