Accordéon
Utilisation
Présentation
L'accordéon est un composant qui permet un affichage progressif des informations. Les accordéons sont utiles lorsque vous devez fournir de grandes quantités de contenu dans un petit espace (par exemple, une interface mobile ou un panneau latéral). Ils se composent d'en-têtes empilés verticalement, qui se développent pour révéler le contenu qui leur est associé. Les accordéons permettent aux utilisateurs de contrôler la quantité d'informations qu'ils voient à l'écran à un moment donné. Vous trouverez notamment des accordéons dans les flux d'assistants et dans les solutions mobiles, où l'espace est limité.
Quand l'utiliser
- Pour afficher le contenu que les utilisateurs peuvent lire de manière sélective.
- Lorsqu'il n'y a pas beaucoup d'espace vertical et que tout le contenu n'a pas besoin d'être affiché en même temps.
- Pour organiser les informations connexes.
Quand ne pas l'utiliser
- Pour le contenu essentiel à l'exécution des tâches.
- Lorsque vous créez un menu. À la place, envisagez d'utiliser le composant Menu de dépassement.
- Lorsque vous avez besoin d'imbriquer plusieurs accordéons les uns dans les autres. À la place, envisagez d'utiliser le composant Vue d'arborescence.
Formatage
Structure
L'accordéon se compose des éléments suivants :
- En-tête : titre qui donne aux utilisateurs un aperçu du contenu dans cette section.
- Chevron : icône indiquant l'état de l'accordéon (développé ou réduit).
- Contenu principal : contenu associé qui apparaît lors du développement de l'en-tête de l'accordéon. Il peut comporter du texte ou des éléments d'interface utilisateur, comme un champ de saisie.
- Séparateur : délimiteur visuel permettant de distinguer les éléments en accordéon. Il doit être visible par défaut avec la possibilité de le masquer.
Alignement et placement
Par défaut, l'icône en forme de chevron est placée sur le côté droit (à la fin) de l'en-tête. Cela permet au titre de l'accordéon de s'aligner sur les autres contenus de la page. Le placement de l'icône (à gauche ou à droite) doit être cohérent sur toutes les pages d'une application.
L'accordéon doit s'adapter à toute la largeur du conteneur parent. Pour modifier la largeur de l'accordéon, modifiez la largeur du conteneur.
Contenu
Directives générales relatives à la rédaction
- Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
- Utilisez des verbes au présent et la forme active dans la plupart des cas.
- Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
- Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
- Utilisez des termes et des phrases concis.
En-tête de l'accordéon
L'en-tête de l'accordéon peut contenir les éléments suivants :
- Texte (titre de l'en-tête et texte secondaire).
- Icône (lorsque le chevron est sur le côté droit, vous pouvez placer une icône avant le titre de l'en-tête. Si le chevron est sur le côté gauche, placez l'icône à la fin de l'en-tête de l'accordéon).
Chaque en-tête de l'accordéon doit avoir un titre unique qui décrit clairement et succinctement le contenu du corps associé. Les en-têtes commencent par une majuscule.
Corps de l'accordéon
- Le contenu des accordéons ne doit jamais défiler horizontalement.
- Vous pouvez diviser le contenu d'un panneau en accordéon en paragraphes et inclure des sous-en-têtes si nécessaire.
Limites de mots et de caractères
Il n'y a pas de limite maximale de caractères ou de mots pour l'en-tête ou le contenu principal.
Comportements
États
Le composant Accordéon a deux états principaux : Réduit et Développé.
- Réduit : état par défaut lorsque l'accordéon est réduit et n'est pas sélectionné. Les accordéons fermés apparaissent sans mise en surbrillance et affichent uniquement le titre de l'en-tête.
- Développé : indique que l'utilisateur a sélectionné l'accordéon et l'a développé pour en afficher le contenu. L'icône représentant un chevron pointe vers le bas pour indiquer que l'accordéon a été développé.
En plus des états Réduit et Développé, les accordéons ont également des états interactifs pour Activé, Désactivé, Survol, Focus, et Actif.
| État | Description | |
|---|---|---|
 | Activé | État par défaut. |
 | Désactivé | Indique que l'accordéon n'est pas interactif, mais qu'il pourrait l'être à un moment donné. L'état Désactivé n'est pas destiné à être accessible, il ne doit donc pas être ciblé. |
 | Survol | Indique un changement de style lorsque l'utilisateur survole l'en-tête de l'accordéon à l'aide d'une souris. |
 | Focus | Indique que l'utilisateur a sélectionné (mais pas développé) l'accordéon. Les contours du composant sont mis en surbrillance dans la couleur de notre marque. |
 | Actif | Indique que l'utilisateur clique ou appuie sur l'élément. |
Interactions
Souris
Lorsqu'un utilisateur clique pour ouvrir un nouvel élément de l'accordéon, les éléments déjà ouverts le restent. Chaque interaction nécessite un clic de l'utilisateur pour empêcher toute désorientation dans l'interface utilisateur. Les utilisateurs peuvent réduire et développer l'accordéon en cliquant sur le chevron ou n'importe où dans la région de l'en-tête.
Clavier
L'en-tête de l'accordéon fonctionne comme un bouton. La touche Entrée et la barre d'espace développent et réduisent chaque panneau de l'accordéon. La touche Tabulation et la combinaison de touches Maj + Tabulation permettent la navigation dans les différents éléments activables de l'accordéon.
Lecteur d'écran
Lorsque l'accordéon est réduit, son contenu est masqué. L'état WAI-ARIA aria-expanded="false" indique aux utilisateurs que le panneau n'est pas visible. Lorsque l'accordéon est développé, l'attribut ARIA est redéfini sur « true » et signale ainsi que le contenu est visible.
Accessibilité
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
- Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
- Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
- Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
- Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Suivez les instructions ci-dessous et reportez-vous également aux WAI-ARIA Authoring Practices for Accordions (Bonnes pratiques de création conformément à la spécification WAI-ARIA) lorsque vous utilisez ce composant dans vos applications :
- Chaque en-tête d'accordéon doit avoir un titre unique décrivant le contenu de l'accordéon afin que les utilisateurs non-voyants, notamment, puissent parcourir chaque en-tête et en comprendre le contenu sans avoir à développer chaque panneau.
- Assurez-vous de l'absence de piège avec le clavier lorsque vous ajoutez du contenu à l'accordéon. Les utilisateurs doivent pouvoir accéder à chaque élément activable, puis passer à l'en-tête de l'accordéon suivant.