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 : 15 août 2022