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
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, 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 ?
Comment l’utiliser
Le libellé de l’accordéon doit décrire clairement l’information qu’il contient.
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.
Un accordéon reste ouvert par défaut, quelle que soit l'interaction de l'utilisateur avec d'autres accordéons présents sur la page.
Les accordéons utilisent la pleine largeur de la zone dans laquelle ils sont intégrés et ne peuvent pas être alignés côte à côte.
Le contenu à l'intérieur de l’accordéon est toujours présenté en une seule colonne.
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. De plus, il est 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
Informations techniques
Dimensions
L’accordéon a une hauteur minimale de 56 px et sa largeur varie en fonction de la zone de contenu dans laquelle il se trouve. Le style visuel de son libellé reste le même, peu importe le niveau de titre utilisé. L'icône est de 16 px.
Espacements
Le contenu doit respecter le dégagement de 16 px prévu à la gauche et à la droite de l’accordéon.
En format mobile, lorsque le titre doit se rendre sur une deuxième ligne, le dégagement de 16 px reste le même. La hauteur de l’accordéon augmente pour s’adapter au contenu tout en respectant les espaces de dégagement.
L’espacement entre les accordéons fermés est de 16 px.
Dans l'accordéon ouvert, le dégagement vertical entre le contenu et la bordure est de 24 px. Le dégagement horizontal entre le contenu et la bordure est de 16 px.
États
Exemple par défaut
CSS de l’accordéon fermé
background-color: #f1f1f2;
CSS de l’icône d’ouverture
color: #223654;
CSS du libellé
font-family: Open Sans;
font-size: 16px;
font-weight: semibold;
color: #223654;
Exemple au survol
CSS de l’accordéon au survol
border: 1px solid #c5cad2;
Exemple ouvert
CSS de l’accordéon ouvert
background-color: #f1f1f2;
border: 1px solid #c5cad2;
CSS de l’icône de fermeture
color: #223654;
Dernière mise à jour : 6 novembre 2023