Afficher plus

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

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

Sur la page Vidéos de l'Info, Voir les 10 vidéos suivantes

Repères