Accordéon - Accordion

Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.

 

Accordéons

Les accordéons sont utilisés pour condenser l'espace en cachant le contenu et en le révélant au besoin.

Structure

Un accordéon est constitué des éléments suivants :

  • un en-tête, correspondant au titre de la section - obligatoire.

  • une icône, “+” indique quand le panneau est fermé, “-” quand le panneau est ouvert - obligatoire.

  • Un séparateur - obligatoire

  • un zone de contenu, masqué par défaut pouvant contenir tout type d'élément - obligatoire.

 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!-- Accordéon seul --> <section class="fr-accordion"> <h3 class="fr-accordion__title"> <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-81">Intitulé accordéon</button> </h3> <div class="fr-collapse" id="accordion-81"> <!-- données de test --> </div> </section> <!-- Groupe d'accordéons --> <ul class="fr-accordion-group"> <li> <section class="fr-accordion"> (...)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <ul class="fr-accordions-group"> <li> <section class="fr-accordion"> <h3 class="fr-accordion__title"> <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-89">Intitulé accordéon</button> </h3> <div class="fr-collapse" id="accordion-89"> <!-- données de test --> </div> </section> </li> <li> <section class="fr-accordion"> <h3 class="fr-accordion__title"> <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-90">Intitulé accordéon</button> </h3> <div class="fr-collapse" id="accordion-90"> <!-- données de test --> </div> </section> </li> <li> <section class="fr-accordion"> <h3 class="fr-accordion__title"> <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-91">Intitulé accordéon</button> </h3> <div class="fr-collapse" id="accordion-91"> <!-- données de test --> </div> </section> </li> </ul>

Par défaut, les accordéons sont fermés et comprennent l’en tête et l’icône “+”.

La totalité de la barre de titre est cliquable. En cliquant sur le titre ou l’icône , le contenu est révélé (l’icône devient “-”) ou caché (l’icône devient “+”).

 

Pour les développeurs :

L'élement fr-accordion est une implémentation du système de collapse, il peut vivre de manière indépendante dans le code, et ainsi s’ouvrir et se fermer au clic.
Il est composé :

  • d’un bouton doté des attributs

    • aria-expanded="false" (précisant que le collapse est fermé par défaut)

    • et aria-controls="accordion-1" pour lier le bouton à l’id du collapse (ici accordion-1).

  • d’un élément de collapse avec un id unique et la classe .fr-collapse

 

Un regroupement de ces éléments peut être fait avec un wrapper .fr-accordions-group. Lors de l’ouverture d’un item au sein d’un même groupe, les autres items se fermeront automatiquement.

Il est possible d’utiliser plusieurs groupes au sein d’une même page, et ceux-si fonctionneront de manière totalement indépendante, c’est-à-dire qu’ouvrir un item d’un group fermera les items de ce même groupe, sans interagir sur les groupes annexes de la page. Pour cela il faut s’assurer que chaque id de collapse est unique.

Règles d’utilisation

Usages

Les accordéons servent à économiser de l'espace sur de longues pages. Ils permettent ainsi :

  • d'alléger des pages de contenus denses en permettant aux utilisateurs de consulter uniquement ce dont ils ont besoin.

  • de guider les utilisateurs dans des parcours complexes

Ne pas utiliser les accordéons dans des contextes où les utilisateurs ont besoin de lire tout les contenus compris dans les accordéons.

Ne pas utiliser non plus avec un contenu très court. Dans ce cas, utiliser des listes ou des paragraphes.

Accessibilité

  • Le système d'accordéon utilise le motif de conception ARIA "Accordion". Ce composant ne nécessite pas d'adaptation particulière.

    Il faut néanmoins prendre soin que les niveaux de titre de chaque section de l'accordéon soient cohérents avec le titrage de la page.

Contenus

  • Les titres des en-têtes doivent être brefs et explicites sur le contenu proposé par l’accordéon.

  • A l’intérieur de l’accordéons, il est possible d’ajouter tout type de contenu selon vos besoins.

Personnalisation

Ce composant n’est pas personnalisable.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :