Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Un bouton « Afficher plus » permet l'affichage de nouveaux contenus à la fin d'une liste.

Alias load more, pagination

D'un point de vue technique, le bouton « Afficher plus » est une forme de pagination. C'est un outil 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. La requête de nouveaux contenus se fait sans changement de page.

Le bouton « Afficher plus » permet l’affichage d’un contenu complémentaire lorsque le bouton est activé et tant que du contenu complémentaire reste disponible. Ils disparaissent ou se désactivent lorsque la totalité du contenu a été affichée dans la page.

Dans le cas où le bouton « Afficher plus » afficherait la totalité du contenu, le comportement du bouton pourrait différer, soit en proposant d'afficher ou de masquer le contenu nouvellement affiché.

Avantages et inconvénients

Avantages

Inconvénients

  • Le bouton « Afficher plus » réduit la hauteur et le poids initial de la page.

  • L'utilisateur contrôle le dévoilement des nouveaux contenus.

  • Les libellés « Afficher plus » ou « Voir plus » utilisés seuls n'indiquent pas la valeur des nouveaux contenus.

  • S'il n'y a pas de paramètres dans l'URL, l'endroit où est rendu l'utilisateur dans son défilement :

  • ne peut être partagé.

  • sera masqué au moment de faire un retour à la page précédente (back de la souris ou du navigateur)

  • Sans indicateur de progression, l'utilisateur ne peut savoir combien de contenus restent à découvrir.

  • Attention à la façon dont le contenu sera intégré dans la page. Si c'est un contenu qui doit être référencé par les moteurs de recherche (SEO), il devra être chargé dès l'ouverture de la page et masqué avec CSS.

Anatomie

Élément

Description et interactions

Bouton

« Afficher plus »

  • Le bouton « Afficher plus » est un élément actionnable avec les différents états (focus, survol, pressé, désactivé) qui permet d'affiche plus de contenu.

  • Annoncer le nombre d'éléments qui seront affichés à l'activation du bouton (facultatif). Exemple : Voir les 10 vidéos suivantes.

  • Lorsqu’il ne reste plus de contenu complémentaire à afficher, le bouton « Afficher plus » se désactive, ou est supprimé.

  • Si le bouton « Afficher plus » (ou « Afficher tout ») affiche la totalité des éléments de la liste, le bouton pourrait permettre de revenir à l'affichage initial (facultatif).

« Afficher plus » conteneur

  • Afficher le nombre d'éléments visible à l'écran. Exemple : 10 émissions.

  • Afficher le nombre total d'éléments qui pourront être affichés (facultatif). Exemple : 10 sur 35 émissions.

Liste d'éléments

  • En HTML, une liste d'éléments suivit d'un bouton « Afficher plus » est essentiellement une liste de liens.

  • En cas de délai à l'affichage des contenus, prévoir une animation d'attente, de progression ou de transition

Comportements attendus

Navigation

  • Lorsque le bouton est activé, le focus est positionné dynamiquement sur le premier élément nouvellement apparu.

  • Dans le cas où le contenu complémentaire affiché ne serait pas interactif, positionner dynamiquement le focus sur le conteneur de celui-ci.

À l’aide du clavier - Liste d'éléments

Touches

Actions

Tab

Permets de naviguer entre les éléments actionnables de la liste, dans l'ordre de lecture.

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

À l’aide du clavier - « Afficher plus »

Touches

Actions

Entrée et Espace

Affiche les nouveaux éléments, et déplace le focus sur le premier élément nouvellement apparu.

Références

Annexe

  • No labels