Boutons « Afficher plus »

Sommaire

• Principe.
• Socle HTML.
• Rôles, états et propriétés ARIA.
• Interactions au clavier.
• Comportements attendus.
• Remarque.

Principe

Les boutons « Afficher plus » sont des composants dynamiques qui se présentent sous la forme d’un bouton permettant l’affichage d’un contenu complémentaire juste avant ce dernier, à chaque fois que le bouton est activé, et tant que du contenu complémentaire reste disponible.

Les boutons « Afficher plus » disparaissent lorsque la totalité du contenu complémentaire a été affiché dans la page.

Socle HTML

Avant activation du bouton

<div>[Contenu affiché par défaut]</div>
<button>[Intitulé du bouton "Afficher plus"]</button>

Après activation du bouton

<div>[Contenu affiché par défaut]</div>
<div tabindex="-1">[Contenu complémentaire, nouvellement affiché]</div>
<button>[Intitulé du bouton "Afficher plus"]</button>

Rôles, états et propriétés ARIA

Suite à l’activation du bouton, tabindex="-1" doit être appliqué sur le conteneur du contenu nouvellement affiché.

Interactions au clavier

Entrée et Espace

Lorsque le focus clavier est positionné sur le bouton, affiche incrémentalement du contenu complémentaire, tant que celui-ci est disponible.

Comportements attendus

• Lorsque le focus clavier est positionné au niveau du bouton, il est possible d’afficher du contenu complémentaire avec les touches Espace et Entrée. Pour cela, passer par l’écoute de l’événement click.
• Lorsque le bouton est activé, le focus clavier est positionné dynamiquement au niveau du conteneur du contenu complémentaire nouvellement affiché.
• Lorsqu’il ne reste plus de contenu complémentaire à afficher, le bouton est supprimé.

Remarque

Dans le cas particulier où le bouton ne permet d’afficher que des éléments interactifs, il est possible de se passer de l’attribut tabindex="-1", et de se contenter de positionner le focus sur le premier élément interactif nouvellement apparu, une fois le bouton activé.

Ainsi, par exemple, dans le cas d’un bouton « Afficher plus d’actualités » qui déclenche l’affichage de liens vers davantage d’actualités :

<ul>
  <li><a href="…">Actualité 1</a></li>
  <li><a href="…">Actualité 2</a></li>
  <li><a href="…">Actualité 3</a></li>
</ul>
<button>Afficher plus d'actualités</button>

Une fois le bouton activé, le focus clavier doit être positionné au niveau du lien « Actualité 4 » nouvellement apparu.

L’emploi de tabindex="-1" n’est pas nécessaire ici, car l’élément <a> est capable de recevoir le focus clavier par défaut.

<ul>
  <li><a href="…">Actualité 1</a></li>
  <li><a href="…">Actualité 2</a></li>
  <li><a href="…">Actualité 3</a></li>
  <li><a href="…">Actualité 4</a></li>
  <li><a href="…">Actualité 5</a></li>
  <li><a href="…">Actualité 6</a></li>
</ul>

2 commentaires

Haut de page