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

  1. Libellé
  2. Icône + ou -
  3. Zone cliquable
  4. Contenu de l’accordéon ouvert
  5. 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.

Amélioration visuelle à venir dans Boostratp 5

Lorsque Campus RÉCIT passera à Moodle 5, certaines des nouvelles fonctionnalités de Boostratp 5 seront ajoutées à l'éditeur HTML Bootstrap. Voici certaines des améliorations possibles aux accordéons.

Item #1

Item #2

Item #3

Source : https://design.quebec.ca/design/composants/accordeon