Accordéon
L’accordéon permet de réduire temporairement la quantité d’information affichée sur une page. Avec cette option, la personne survole le contenu et accède plus rapidement à l’information recherchée.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Quand l’utiliser
On utilise l’accordéon lorsque le contenu qu’il contient est non essentiel à la réalisation de la tâche et lorsque le défilement de la page est long. Attention, l’accordéon augmente la charge cognitive de l’utilisateur puisque chaque clic est une décision supplémentaire. Il faut limiter son utilisation puisque l’information sous les accordéons a tendance à être ignorée.
Avant de recourir à l’utilisation des accordéons dans une page, il est préférable de structurer la page à l’aide de niveaux de titres lorsque la plupart ou la totalité de l’information sur une page est importante.
On peut aussi utiliser l’accordéon pour présenter du contenu connexe qui est trop court pour en faire une page distincte et qui sert de complément au contenu visible dans la page.
Il n’y a pas de minimum de contenu à insérer dans un accordéon, mais il faut toujours se questionner sur les raisons qui motivent ce choix :
- Est-ce que cet ajout simplifie ou complique la tâche de l’utilisateur ?
- Est-ce qu’un niveau de titre ferait tout aussi bien l’affaire ?
Quand ne pas l’utiliser
Il est déconseillé d’utiliser un accordéon lorsque l’information à afficher est essentielle à la réalisation de la tâche ou que l’on souhaite éviter toute complexité supplémentaire dans la navigation.
Anatomie
- Libellé
- Icône + ou -
- Zone cliquable
- Contenu de l’accordéon ouvert
- Bordure
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Bonnes pratiques
Une page ne doit jamais être constituée uniquement d’accordéons. La structure principale de la page doit toujours contenir d’autres éléments que des accordéons pour assurer une expérience utilisateur équilibrée.
Libellé
Le libellé de l’accordéon doit décrire clairement l’information qu’il contient.
Contenu de l’accordéon ouvert
Le contenu de l’accordéon doit se limiter à du texte courant, comprenant des paragraphes et des listes à puces ou numérotées. Il ne doit pas contenir de niveaux de titres ou de tableaux. Il est également possible d’inclure une image informative accompagnée de sa légende, mais aucun élément interactif tel que des boutons radio, des cases à cocher ou des boutons d’action ne doit être présent dans un accordéon.
Si le contenu à inclure dans l’accordéon est particulièrement long, il est préférable de considérer la création d’une page distincte pour ce contenu.
À ne pas faire
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Accordéon (complet)
Dimensions : Les accordéons ont une hauteur minimale de 56 px et leur largeur varie en fonction de la zone de contenu dans laquelle ils se trouvent. Les accordéons occupent 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large. Ils ne peuvent pas être alignés côte à côte.
Espacements : L’espacement entre les accordéons fermés est de 16 px.
Contenu de l’accordéon
Positionnement et alignement : Le contenu à l’intérieur de l’accordéon est toujours présenté en une seule colonne.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Accordéon (complet)
L’accordéon est fermé par défaut.
Une fois ouvert, un accordéon reste ouvert, quelle que soit l’interaction de l’utilisateur avec d’autres accordéons présents sur la page.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le libellé pour ouvrir ou fermer l’accordéon.
- Lorsque l’accordéon est ouvert, l’utilisateur peut voir le contenu caché.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Entrée pour ouvrir ou fermer l’accordéon.
- Naviguer entre les accordéons avec les flèches du clavier.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026