Accordéons Les accordéons permettent d'optimiser l'affichage de certains contenus d'une page dans un espace réduit. Dans cette page : Quand les utiliser Ils peuvent s'avérer une solution efficace dans les cas suivants :Comparer différentes options qui s'offrent à l'utilisatrice ou à l'utilisateur Présenter les différentes étapes d'un processus Donner un exemple 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. Note Exemple Titre de l'accordéonContenu de l'accordéon Fin de la note Note Note Les accordéons ne constituent pas toujours une solution idéale puisqu'ils cachent le contenu et exigent un clic supplémentaire de la part des utilisatrices et des utilisateurs.Plutôt que d'opter pour des accordéons, vous pourriez égalementutiliser la composante ancre (« Dans cette page ») présentant les informations sous forme de h2 pour que les utilisateurs puissent accéder rapidement aux différentes sections;diviser le contenu dans plusieurs pages. Fin de la note À éviterS'il y a plus de sept accordéons consécutifs dans une page.Si l'accordéon cache l'action principale à accomplir dans la page.Fin de l'exemple Structure Partie cliquable de l'accordéonIndicateur visuel d'état de l'accordéon Zone de contenu lorsque l'accordéon est développé États Tous les accordéons peuvent être déployés dans une page pour assurer une bonne expérience utilisateur. On ne force en aucun cas la fermeture d'un accordéon, à moins d'une exception.Comme les autres éléments interactifs, les accordéons doivent répondre aux interactions de la souris et du clavier. Par conséquent, ceux-ci ont quatre états d'interaction distinctifs.État actifL'accordéon est prêt à être cliqué. C'est l'état que les utilisatrices et les utilisateurs voient le plus souvent sur une page. Titre de l'accordéonContenu de l'accordéonÉtat au survolLorsque le curseur survole la zone cliquable de l'accordéon (ouvert ou fermé), 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. Titre de l'accordéonContenu de l'accordéonÉtat déployéLorsque l'utilisateur interagit avec la zone cliquable de l'accordéon (au clic ou en utilisant 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é contenant l'icône devient bleu foncé.Titre de l'accordéonContenu de l'accordéonÉtat au focusCe mode n'est visible que lorsque l'utilisateur navigue au clavier. C'est un indicateur visuel qui permet à l'utilisatrice ou à l'utilisateur de savoir où il se situe dans la page par rapport aux éléments interactifs.Titre de l'accordéonContenu de l'accordéon Informations techniques Les accordéons sont généralement fermés par défaut à l'arrivée dans la page. Dans certains cas, l'un d'entre eux peut être déployé. Dimensions La largeur de l'accordéon varie en fonction du gabarit dans lequel elle se trouve. Le style visuel de son libellé reste le même, peu importe le niveau de titre utilisé. 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 style de titre, un h2, h3, h4, etc., afin d'aider les moteurs de recherche à bien comprendre la hiérarchie sémantique de ceux-ci dans votre page.Par exemple, si votre accordéon est un h2, le titre qui se trouve dans cet accordéon devrait logiquement être un h3, pour respecter la hiérarchie d'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 et des normes transactionnels. Note À consulter aussi Niveaux de titres et texte courantPolices de caractères Fin de la note