Les accordéons permettent d'optimiser l'affichage de certains contenus d'une page dans un espace réduit.

Utilisation

Ils peuvent s'avérer une solution efficace dans les cas suivants :

1. Comparer différentes options qui s'offrent à l'utilisatrice ou à l'utilisateur.
2. Présenter les différentes étapes d'un processus.
3. Donner un exemple.
4. Afficher de l'information complémentaire sur un sujet.

Selon le contexte d'utilisation, les accordéons peuvent être utilisés seuls ou groupés.

Structure

 

1. Partie cliquable de l'accordéon
2. Indicateur visuel d'état de l'accordéon 
3. Zone de contenu lorsque l'accordéon est développé

États

Comme les autres éléments interactifs, les accordéons doivent répondre aux actions commandées par la souris et le clavier. Par conséquent, ceux-ci ont quatre états d'interaction distincts.

État actif

Il indique que l'utilisatrice ou l'utilisateur peut cliquer sur l'accordéon. C'est l'état que les utilisatrices et utilisateurs voient le plus souvent sur une page. 

État au survol

Lorsque l'utilisatrice ou l'utilisateur survole la zone cliquable de l'accordéon (ouvert ou fermé) avec le curseur, la couleur de l'encadré qui contient l'icône change de nuance et le pointeur se transforme en main pour indiquer qu'une action est possible.

État déployé

Lorsque l'utilisatrice ou l'utilisateur interagit avec la zone cliquable de l'accordéon (à l'aide d'un clic gauche ou de la touche « Entrée » du clavier), le contenu de l'accordéon se déploie. L'indicateur visuel d'état change pour indiquer que le contenu du tiroir est déployé et la couleur de l'encadré qui renferme l'icône devient bleu foncé.

L'indicateur visuel d'état change pour indiquer que le contenu du tiroir est déployé et la couleur de l'encadré contenant l'icône devient bleu foncé.

État au focus

Ce mode n'est visible que lorsque l'utilisatrice ou l'utilisateur navigue au clavier. C'est un indicateur visuel qui lui permet de savoir où elle ou il se situe dans la page par rapport aux éléments interactifs.

Comportement

Les accordéons sont généralement fermés par défaut à l'arrivée dans une page. Pour assurer une bonne expérience utilisateur, ils doivent toutefois pouvoir être tous déployés en même temps. En effet, on ne force en aucun cas la fermeture d'un accordéon, à moins d'une exception.

Libellés

Les titres de l'accordéon et de chaque tiroir doivent être significatifs, concis, précis et uniques. Ils doivent généralement comporter un niveau d'intertitre, par exemple un H2, un H3 ou un H4, afin d'aider les moteurs de recherche à bien comprendre leur hiérarchie sémantique dans votre page.

Par exemple, si le niveau de titre appliqué à votre accordéon est H2, le niveau du titre qui se trouve dans cet accordéon devrait logiquement être H3, pour respecter la hiérarchie de l'information.

Accessibilité

Pour en savoir plus au sujet des normes d'accessibilité relatives aux accordéons, consultez la page Accordéons – Accessibilité du guide des standards d'interfaces du site Web transactionnel de Revenu Québec.