Dernière mise à jour : 4 juin 2026
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
- Accessibilité
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
À la navigation au clavier
La navigation au clavier doit permettre de parcourir les tiroirs et d'interagir avec eux de manière prévisible, dans cet ordre :
- Touche Tab. : atteint successivement les éléments interactifs qui contrôlent les tiroirs.
- Si le tiroir est déjà ouvert, la tabulation suivante permet de parcourir les éléments cliquables qu’il contient.
- Si le tiroir est fermé, la tabulation passe directement à l’élément interactif qui ouvre le tiroir suivant.
- Touche Entrée ou barre d’espacement : ouvre ou ferme le tiroir où se trouve le focus.
Avec les lecteurs d’écran
Pour assurer une navigation fluide dans un accordéon, les lecteurs d’écran annoncent les éléments suivants :
- Le libellé du tiroir et sa fonction, par exemple « bouton », dès que l’élément interactif est en focus.
- L'état du tiroir, qu’il soit ouvert ou fermé.
- Le niveau de titre, par exemple « titre niveau 2 ».
Exemple de ce qui doit être annoncé pour un tiroir qui présente les exigences permettant de bénéficier d’un tarif d’électricité : « Exigences pour bénéficier de ce tarif, bouton réduit, titre niveau 2 ».
Implémentation (HTML)
L’accordéon comporte certains attributs afin d’être correctement annoncé par les lecteurs d’écran et de permettre une bonne navigation au clavier.
Contrôle d’un tiroir
C’est un titre <hn> qui contient un bouton <button> ou un élément portant les attributs role="button" et tabindex="0".
Le bouton communique son état grâce à un attribut aria-expanded dont la valeur est dynamique : true lorsqu’il est ouvert, ou false lorsqu’il est fermé.
Il contient aussi un attribut aria-controls qui doit pointer vers l'identifiant (id) du contenu qu’il affiche ou qu’il masque.
Le bouton est représenté par une icône qui indique s’il est ouvert ou fermé. Cette icône ne doit pas être annoncée par les lecteurs d’écran.
Plus d’informations à propos de l’accessibilité des icônes est disponible dans la page qui traite de la sémantique des images.
Contenu des tiroirs
Il porte un identifiant unique (id) dans la page.
Il est masqué dynamiquement, en utilisant les propriétés CSS display: none ou visibility: hidden, lorsque le tiroir est fermé, afin qu'il ne soit pas lu par les lecteurs d'écran.
Il porte un role="region" pour délimiter clairement la zone d’information.
L’attribut id unique au bouton du tiroir est repris pour nommer le conteneur de ce tiroir avec un attribut aria-labelledby.
Attention à la surcharge
Il faut éviter d’avoir un trop grand nombre d’accordéons dans une même page. Si l’accordéon est susceptible d’avoir plus de six tiroirs ouverts simultanément, il ne faut pas appliquer un role="region".
Comment se comporte un accordéon accessible ?