Comparaison comportementale
Accordéon vs Onglets
Différence décisive
L’Accordéon empile des sections dont le contenu apparaît sous chaque en-tête ; les Onglets remplacent un panneau par un autre et n’en montrent qu’un seul à la fois.
Critères de choix, liens et sources
- AccordéonChoisis Accordéon si plusieurs sections peuvent rester ouvertes en même temps et se lisent de haut en bas, comme une FAQ.Ouvrir la fiche Accordéon
- OngletsChoisis Onglets si les vues sont de même niveau et qu’une seule doit occuper l’espace à la fois.Ouvrir la fiche Onglets
Voir les neuf dimensionsVoir les sources
Changer de vue ou révéler du contenu
Essayer
Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?
Accordéon
Contexte commun aux essais
Un espace projet révèle du contenu associé sur place tout en conservant la position de l'utilisateur dans la page.
Accordéon
Mission
Accordéon - Accordion
Développer Remboursements, atteindre Moyens de paiement au clavier, l'ouvrir et replier Remboursements.
Informations essentielles, toujours ouvertes
Cette réponse doit rester visible pour terminer la procédure.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- L'en-tête développé expose son état et la réponse apparaît juste après.
- Cas limite
- Une section obligatoirement ouverte ne peut pas être repliée et communique cette règle sans faux contrôle.
Onglets
Mission
Onglets - Tabs
Passe le focus d’Aperçu à Fichiers avec les flèches, puis appuie sur Entrée pour afficher son panneau.
Résumé du projet et prochaines échéances.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Un onglet sélectionné nomme le panneau visible, et les autres panneaux sont masqués de l'interaction.
- Cas limite
- Si un panneau charge sensiblement, l'activation devient manuelle afin que les flèches ne déclenchent pas des attentes répétées.
Ce que cet essai montre
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.
Lequel convient à ton besoin ?
Accordéon
Organiser des FAQ ou sections de détail facultatives
Onglets
Regrouper quelques vues de même niveau
Différence et sources
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.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
En-tête
Un en-tête pertinent qui introduit le message ou le contenu révélé.
Décision
Question de famille
Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?
Trois critères pour choisir
- Interactivité
Accordéon
Un ou plusieurs panneaux se déploient et se replient sans changer de contexte de page.
Onglets
Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement.
- Positionnement
Accordéon
Titres empilés verticalement, chaque panneau suivant directement son contrôle.
Onglets
Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif.
- Focus
Accordéon
Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme.
Onglets
La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l'ordre normal s'il contient des contrôles.
Neuf dimensions
- Déclenchement
Accordéon
Clic, toucher, Entrée ou Espace sur le bouton de titre d’une section.
Onglets
Clic, toucher ou activation clavier d’un onglet ; les flèches circulent dans la liste.
- Modalité
Accordéon
Révélation non modale dans le flux du document.
Onglets
Navigation non modale entre des panneaux liés dans le même contexte.
- Positionnement
Accordéon
Titres empilés verticalement, chaque panneau suivant directement son contrôle.
Onglets
Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif.
- Interactivité
Accordéon
Un ou plusieurs panneaux se déploient et se replient sans changer de contexte de page.
Onglets
Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement.
- Focus
Accordéon
Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme.
Onglets
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
Accordéon
Chaque panneau développé se ferme en activant son propre en-tête lorsque le produit permet le repli.
Onglets
Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant.
- Rôle accessible
Accordéon
heading > button[aria-expanded][aria-controls] + region
Onglets
tablist > tab + tabpanel
- Cas d’usage
Accordéon
Organiser des FAQ ou sections de détail facultatives
Onglets
Regrouper quelques vues de même niveau
- Comportement mobile
Accordéon
Utiliser des boutons de titre pleine largeur et préserver la position de lecture lorsque la hauteur change.
Onglets
Garder les libellés lisibles dans une liste horizontale défilante ; éviter de répartir les onglets sur des lignes ambiguës.
| 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. |