Accordéon - Accordion
Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.
- 1 Accordéons
- 1.1 Structure
- 2 Règles d’utilisation
- 2.1 Usages
- 2.2 Accessibilité
- 2.3 Contenus
- 2.4 Personnalisation
- 2.5 Besoin d’aide ?
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-accordions-group">
<li>
<section class="fr-accordion">
(...)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 :
la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !le centre de support pour envoyer vos demandes de correctifs et d'évolution.