Comparaison comportementale
Accordéon vs Onglets
Choisir Accordéon pour : Organiser des FAQ ou sections de détail facultatives. Choisir Onglets pour : Regrouper quelques vues de même niveau.
| 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 containing button with aria-expanded and controlled region | tablist with tab and 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. |