Dernière mise à jour : 10 avril 2025
L'accordéon permet de regrouper différents contenus dans des tiroirs que l'utilisateur ouvre ou ferme pour les révéler ou les masquer.
- Guide d’utilisation
- Design
Utilisation
L'accordéon peut guider l'utilisateur et aider à raccourcir le contenu d'une page. On doit y avoir recours seulement pour masquer du contenu complémentaire ou secondaire à la communication principale, qui, elle, doit être visible en tout temps.
Puisque son usage augmente considérablement la charge mentale de l'utilisateur, l'accordéon doit être utilisé avec parcimonie. Son titre et ceux de ses tiroirs doivent être précis et concis, afin de rendre la navigation plus facile pour l'utilisateur. Ce dernier peut ainsi balayer rapidement les informations de la page sans avoir à ouvrir tous les tiroirs de l'accordéon pour savoir ce qu'ils contiennent.
Quand utiliser l'accordéon
Bien utilisé, l’accordéon simplifie la lecture en cachant le contenu complémentaire, permettant ainsi à l’utilisateur de concentrer son attention sur le contenu principal de la page.
Lorsqu'il y a beaucoup d'information, l'accordéon guide l’utilisateur en soustrayant des contenus dont la lecture est facultative. Ces contenus deviennent disponibles à la suite d'un clic sur l'icône d'ouverture d'un tiroir et peuvent ensuite être cachés en cliquant sur l'icône de fermeture.
Principales règles d'utilisation
- Un accordéon contient toujours deux tiroirs ou plus. Jamais de tiroir unique.
- En aucun cas, un accordéon ne peut contenir d’autres accordéons.
- Les tiroirs d'un accordéon sont tous fermés par défaut, sauf si le contenu d'un tiroir est appelé à l'aide d'un hyperlien.
- On ne force jamais la fermeture d'un tiroir lorsque l'utilisateur en ouvre un autre. Seul l'utilisateur peut fermer un tiroir ouvert.
- Il faut considérer la longueur du contenu avant de le placer dans un accordéon. Pourquoi imposer un clic supplémentaire à l'utilisateur, si le contenu est très court ? Les contenus très longs sont aussi à éviter.
- Il ne faut pas masquer de l’information essentielle à l’utilisateur et l'obliger à cliquer sur chaque tiroir pour trouver ce qu'il cherche.
- Il faut éviter d’intégrer des éléments interactifs, des tuiles par exemple, à l’intérieur d’un accordéon. L'hyperlien est toutefois accepté.
Quand envisager autre chose
- Lorsqu’il y a beaucoup d'accordéons dans la page, il faut se questionner pour déterminer si c’est vraiment la solution à privilégier ou s’il y a une meilleure façon de présenter le contenu.
- Si le contenu est très long et que toute l'information est essentielle, on peut répartir ce contenu par sujets sur des pages distinctes.
- Si le contenu peut tenir sur une seule page, l'intégration d'ancres en haut de page facilite la navigation de l'utilisateur.
Rédaction UX
Il faut inclure un titre au-dessus de l’accordéon. Ce titre doit clairement indiquer la thématique de regroupement des contenus.
Le libellé de chaque tiroir d’un accordéon doit communiquer précisément ce qu’il contient pour éviter que l’utilisateur ouvre de multiples tiroirs afin de trouver l’information qu’il cherche.
Nombre de caractères maximal
Titre de l'accordéon : 80 caractères, espaces inclus.
Libellé d'un tiroir : 80 caractères, espaces inclus.
Anatomie
Couleurs et styles
Autant que possible, il faut privilégier des accordéons sur fond blanc ou fond bleu-80.
Taille
Grille – Petite (mobile)
L'accordéon se place sur 4 colonnes.
Grille – Medium (tablette), large et X-large (ordinateur)
L'accordéon se place sur 8 colonnes.
Espacement
- Les espacements relatifs au contenu à l'intérieur d'un tiroir utilisent les règles de la ligne directrice Espacements.
- L’espacement entre le contenu et les séparateurs est de 14 px pour toutes les résolutions.
Interactivité
Défaut
Survol
Focus