Boutons « Afficher plus »

Sommaire

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

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>

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page