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.

Il est préférable d’utiliser des 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 : 5 août 2021