Comparaison comportementale
Accordéon vs Contrôle segmenté
Choisir Accordéon pour : Organiser des FAQ ou sections de détail facultatives. Choisir Contrôle segmenté pour : Basculer entre quelques modes d'affichage compacts.
| Dimension | AccordéonAccordion | Contrôle segmentéSegmented control |
|---|---|---|
| Déclenchement | Clic, toucher, Entrée ou Espace sur le bouton de titre d’une section. | Clic ou toucher sur un segment compact. |
| Modalité | Révélation non modale dans le flux du document. | Contrôle exclusif non modal pour un changement immédiat de vue ou de filtre. |
| Positionnement | Titres empilés verticalement, chaque panneau suivant directement son contrôle. | Une courte ligne d’options adjacentes dans la vue concernée. |
| Interactivité | Un ou plusieurs panneaux se déploient et se replient sans changer de contexte de page. | Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement. |
| Focus | Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme. | Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné. |
| Fermeture | Chaque panneau développé se ferme en activant son propre en-tête lorsque le produit permet le repli. | Sans objet : choisir un autre segment remplace la valeur sélectionnée. |
| Rôle accessible | heading containing button with aria-expanded and controlled region | radiogroup with radio options |
| Cas d’usage | Organiser des FAQ ou sections de détail facultatives | Basculer entre quelques modes d'affichage compacts |
| Comportement mobile | Utiliser des boutons de titre pleine largeur et préserver la position de lecture lorsque la hauteur change. | Le limiter à quelques options courtes ; passer aux onglets ou au select avant que les libellés débordent. |