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 ?
À ne pas faire
Comment l’utiliser
Le libellé de l’accordéon doit décrire clairement l’information qu’il contient.
Une page ne doit jamais contenir que des accordéons : la structure principale de la page ne doit jamais être composée uniquement d’accordéons.
Le contenu de l’accordéon est toujours présenté en une seule colonne et ne contient pas de niveau de titre. Si le contenu est long, l’option de lui créer sa propre page ou de le synthétiser est à envisager.
Un accordéon reste ouvert par défaut. Il n’y a pas de fermeture automatique, même si l’utilisateur ouvre d’autres accordéons présents dans la page.
Les accordéons utilisent la pleine largeur de la zone dans laquelle ils se trouvent. Ils ne peuvent pas être mis côte à côte.
Informations techniques
Dimensions
L’accordéon a une hauteur minimale de 48 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é.
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 16px 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 entre le haut du contenu et l’encadré est de 24px. Le même dégagement est présent entre la fin du contenu et la bordure de l’accordéon.
États
Exemple par défaut
CSS de l’accordéon fermé
background-color: #f2f1f1
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 survol
border: 1px solid #c5cad2
Exemple ouvert
CSS de l’accordéon ouvert
background-color: #f2f1f1
border: 1px solid #c5cad2
CSS de l’icône de fermeture
color: #223654
Dernière mise à jour : 23 février 2023