Système d'accordéon UI

Que fait Système d'accordéon UI ?

Objectif

La compétence Système d'accordéon UI fournit une méthodologie pour concevoir et structurer des accordéons—des en-têtes empilés qui se développent pour révéler le contenu associé. Ce motif est essentiel pour la divulgation progressive, permettant aux utilisateurs de parcourir des informations de haut niveau et de choisir les détails à consulter. Une approche systématique des accordéons garantit qu'ils réduisent la charge cognitive sans masquer les informations critiques ni créer de barrières à l'accessibilité.

Cas d'utilisation

• Sections FAQ : Organiser une longue liste de questions et réponses en une liste facile à parcourir.
• Menus mobiles : Réduire les éléments de navigation secondaires pour économiser de l'espace vertical.
• Formulaires complexes : Regrouper des champs de formulaire connexes en sections gérables et basculables.
• Détails des produits : Masquer les spécifications techniques, les informations de livraison ou les avis sur les pages e-commerce.
• Filtrage : Gérer plusieurs groupes de facettes dans une barre latérale de découverte.

Quand ne PAS utiliser

• Petits volumes de contenu : Si le contenu total est bref, le masquer derrière un clic ajoute un coût d'interaction inutile.
• Instructions critiques : Si un utilisateur doit lire les informations pour continuer (par exemple, avertissements légaux ou étapes "mode d'emploi"), ne les masquez pas.
• Pages lourdes en recherche : Si les utilisateurs doivent fréquemment utiliser la fonction "Rechercher" du navigateur (Cmd/Ctrl+F) ; le contenu masqué des accordéons n'est souvent pas consultable par défaut.
• Divulgation d'un seul élément : Utilisez un simple lien "Afficher plus" ou un composant de divulgation unique s'il n'y a qu'un seul élément de contenu à basculer.

Entrées

1. Inventaire du contenu : Une liste d'en-têtes et de leur contenu développé correspondant.
2. Logique d'expansion : Un seul élément doit-il être ouvert à la fois (Exclusif) ou plusieurs peuvent-ils être ouverts ?
3. Contexte du déclencheur : Où l'accordéon va-t-il se trouver ? (par exemple, zone de contenu principale, barre latérale ou tiroir mobile ?)
4. Systèmes existants : Échelles d'espacement fluide et de typographie du système de conception parent.

Sorties

1. Spécification d'anatomie de l'accordéon : Définitions visuelles pour les en-têtes, icônes, panneaux et espacement.
2. Spécification d'interaction : Comportement pour l'expansion, les états de focus et les transitions.
3. Plan d'accessibilité : Rôles ARIA, états et mappage clavier.
4. Stratégie adaptative : Règles pour la façon dont l'accordéon s'adapte aux zones d'affichage étroites.

Workflow

1. Structurer l'anatomie du contenu

Définir les parties standard d'un élément d'accordéon :

• L'en-tête (déclencheur) : La zone cliquable contenant le titre.
• L'icône (affordance) : Généralement un chevron ou un signe plus/moins pour indiquer l'extensibilité.
• Le panneau : Le conteneur qui renferme le contenu masqué.
• Le groupe : Le conteneur parent qui gère la relation entre plusieurs éléments.

2. Établir les affordances visuelles

Appliquer le système de hiérarchie visuelle pour garantir que l'accordéon est reconnaissable :

• Indicateurs d'état : Utiliser des icônes (chevrons) qui tournent ou changent lorsque l'accordéon est ouvert.
• Séparation : Utiliser des bordures, des changements de couleur de fond ou un espacement vertical (provenant du système d'espacement fluide) pour distinguer les éléments.
• En-têtes : S'assurer que le texte de l'en-tête semble interactif (poids plus élevé ou couleur différente).

3. Définir la logique d'interaction

Choisir le modèle de comportement :

• Exclusif (ouverture unique) : Ouvrir un élément ferme automatiquement les autres. Idéal pour la concentration et réduire la longueur de la page.
• Multi-ouverture : Plusieurs éléments peuvent rester ouverts. Idéal lorsque les utilisateurs doivent comparer des informations entre les sections.
• État par défaut : Déterminer si le premier élément doit être ouvert par défaut pour signaler la fonctionnalité.

4. Optimiser l'espacement et le contenu

Appliquer le système d'espacement fluide à l'intérieur :

• Remplissage de l'en-tête : S'assurer que la cible tactile mesure au moins 24x24px (WCAG 2.2 SC 2.5.8 minimum) ; préférer 44x44px là où la disposition le permet pour un confort tactile.
• Remplissage du panneau : Utiliser un remplissage interne pour créer une relation claire entre l'en-tête et son contenu.
• Transitions : Utiliser des transitions subtiles de hauteur ou d'opacité (200-300 ms) pour adoucir le "saut" lorsque le contenu apparaît.

5. Vérifier l'accessibilité et l'adaptabilité

• Clavier : Les utilisateurs doivent pouvoir naviguer par Tab vers les en-têtes et utiliser Entrée/Espace pour basculer, conformément au modèle d'accordéon ARIA APG.
• ARIA : Envelopper chaque déclencheur dans un élément d'en-tête (<h3><button aria-expanded="true/false" aria-controls="panel-id">...</button></h3>) et attribuer au panneau role="region" avec aria-labelledby pointant vers le déclencheur lorsque les panneaux contiennent un contenu substantiel.
• Mobile : S'assurer que les en-têtes longs se répartissent élégamment et ne chevauchent pas les icônes.

Règles de décision

• La règle du chevron : Inclure toujours un indicateur visuel (comme un chevron) sur le côté droit de l'en-tête. Il doit pointer vers le bas lorsqu'il est fermé et vers le haut lorsqu'il est ouvert.
• La règle du premier élément : Ouvrir le premier élément de l'accordéon par défaut s'il contient les informations les plus importantes ou les plus demandées.
• Troncature du texte : Ne jamais tronquer les en-têtes d'accordéon. Si un titre est long, laissez-le se répartir sur plusieurs lignes pour garantir la clarté.
• Alignement : Garder l'icône du déclencheur d'expansion/réduction cohérente (généralement alignée à l'extrême droite) pour créer un chemin de balayage prévisible.

Contraintes

• Accessibilité : Les en-têtes doivent utiliser des balises d'en-tête sémantiques (H2-H4) contenant un <button> pour l'accès clavier ; respecte la taille minimale de cible WCAG 2.2 SC 2.5.8 (24x24px).
• Adaptabilité : La largeur de l'accordéon doit être fluide (100 % du parent). Le contenu du panneau doit être entièrement adaptatif.
• Hiérarchie : Les en-têtes d'accordéon ne doivent jamais être visuellement plus proéminents que le H1 de la page.

Modèles d'échec courants

• Déclencheurs "viande mystère" : Des en-têtes d'accordéon qui ressemblent à du texte brut, laissant les utilisateurs ignorer qu'ils peuvent être cliqués.
• Saut de contenu : Des transitions rapides et saccadées qui désorientent la position de défilement de l'utilisateur.
• États de focus manquants : Oublier de concevoir un anneau de focus visible pour les utilisateurs du clavier.
• Panneaux surchargés : Placer trop de contenu interactif complexe (comme d'autres accordéons) dans un panneau, conduisant à une "inception imbriquée".
• ARIA inaccessible : Ne pas mettre à jour les états aria-expanded par programmation.

Critères de validation

• Chaque élément d'accordéon possède un indicateur visuel clair (ex. chevron).
• Les en-têtes sont accessibles par clavier (basés sur un bouton) avec des états de focus visibles.
• aria-expanded et aria-controls sont correctement définis.
• L'espacement interne suit le système d'espacement fluide.
• La logique exclusive/multi-ouverture est appropriée pour le type de contenu.
• L'accordéon effectue des transitions fluides sans casser la disposition.
• Les cibles tactiles respectent le minimum WCAG 2.2 de 24x24px (44x44px préféré).