SkillCodexOuvrir les favoris et l’historique
Mesure d'audience
Avec ton accord, Google Analytics mesure l'usage du site pour nous aider à l'améliorer. Ton choix est mémorisé sur cet appareil et reste modifiable via « Cookies » en pied de page.
Comparaison comportementale
Choisir Accordéon pour : Organiser des FAQ ou sections de détail facultatives. Choisir Onglets pour : Regrouper quelques vues de même niveau.
Décision
Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?
Choisis Accordéon si Accordion révèle les sections sous leurs en-têtes ; Tabs remplace un panneau de même niveau, tandis que Segmented control choisit une valeur compacte.. Choisis Onglets si Tabs contrôle des panneaux de contenu ; Segmented control choisit une valeur, tandis qu'Accordion révèle des sections verticales sans remplacer un panneau commun..
| Dimension | AccordéonAccordion | OngletsTabs |
|---|---|---|
| Déclenchement | Clic, toucher, Entrée ou Espace sur le bouton de titre d’une section. | Clic, toucher ou activation clavier d’un onglet ; les flèches circulent dans la liste. |
| Modalité | Révélation non modale dans le flux du document. | Navigation non modale entre des panneaux liés dans le même contexte. |
| Positionnement | Titres empilés verticalement, chaque panneau suivant directement son contrôle. | Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif. |
| Interactivité | Un ou plusieurs panneaux se déploient et se replient sans changer de contexte de page. | Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement. |
| Focus | Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme. | La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l'ordre normal s'il contient des contrôles. |
| Fermeture | Chaque panneau développé se ferme en activant son propre en-tête lorsque le produit permet le repli. | Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant. |
| Rôle accessible | heading > button[aria-expanded][aria-controls] + region | tablist > tab + tabpanel |
| Cas d’usage | Organiser des FAQ ou sections de détail facultatives | Regrouper quelques vues de même niveau |
| Comportement mobile | Utiliser des boutons de titre pleine largeur et préserver la position de lecture lorsque la hauteur change. | Garder les libellés lisibles dans une liste horizontale défilante ; éviter de répartir les onglets sur des lignes ambiguës. |
