Comparaison comportementale
Accordéon vs Contrôle segmenté
Différence décisive
L’Accordéon révèle ou masque des sections de contenu sous leurs en-têtes ; le Contrôle segmenté choisit une valeur dans un petit ensemble et n’affiche aucun contenu propre.
Critères de choix, liens et sources
- AccordéonChoisis Accordéon si l’utilisateur ouvre des sections de détail facultatives, comme une FAQ, et peut en laisser plusieurs ouvertes.Ouvrir la fiche Accordéon
- Contrôle segmentéChoisis Contrôle segmenté si l’utilisateur bascule un réglage ou un mode d’affichage compact entre deux et cinq valeurs.Ouvrir la fiche Contrôle segmenté
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.
Contrôle segmenté
Mission
Contrôle segmenté - Segmented control
Choisir Compact au pointeur, puis Dense avec les flèches et vérifier qu’une seule valeur reste sélectionnée.
- Brief.pdf
- Budget.xlsx
- Notes.txt
É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
- Une seule densité d’affichage est active. Le segment sélectionné et l’espacement du contenu restent synchronisés.
- Cas limite
- Quand les libellés ne tiennent plus sans être coupés, l’interface emploie un contrôle à valeur unique plus adapté, comme Select.
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
Contrôle segmenté
Basculer entre quelques modes d'affichage compacts
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.
Contrôle segmenté
Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement.
- Positionnement
Accordéon
Titres empilés verticalement, chaque panneau suivant directement son contrôle.
Contrôle segmenté
Une courte ligne d’options adjacentes dans la vue concernée.
- Focus
Accordéon
Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme.
Contrôle segmenté
Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné.
Neuf dimensions
- Déclenchement
Accordéon
Clic, toucher, Entrée ou Espace sur le bouton de titre d’une section.
Contrôle segmenté
Clic ou toucher sur un segment compact.
- Modalité
Accordéon
Révélation non modale dans le flux du document.
Contrôle segmenté
Contrôle exclusif non modal pour un changement immédiat de vue ou de filtre.
- Positionnement
Accordéon
Titres empilés verticalement, chaque panneau suivant directement son contrôle.
Contrôle segmenté
Une courte ligne d’options adjacentes dans la vue concernée.
- Interactivité
Accordéon
Un ou plusieurs panneaux se déploient et se replient sans changer de contexte de page.
Contrôle segmenté
Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement.
- Focus
Accordéon
Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme.
Contrôle segmenté
Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné.
- Fermeture
Accordéon
Chaque panneau développé se ferme en activant son propre en-tête lorsque le produit permet le repli.
Contrôle segmenté
Sans objet : choisir un autre segment remplace la valeur sélectionnée.
- Rôle accessible
Accordéon
heading > button[aria-expanded][aria-controls] + region
Contrôle segmenté
radiogroup > radio
- Cas d’usage
Accordéon
Organiser des FAQ ou sections de détail facultatives
Contrôle segmenté
Basculer entre quelques modes d'affichage compacts
- Comportement mobile
Accordéon
Utiliser des boutons de titre pleine largeur et préserver la position de lecture lorsque la hauteur change.
Contrôle segmenté
Le limiter à quelques options courtes ; passer aux onglets ou au select avant que les libellés débordent.
| 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 > button[aria-expanded][aria-controls] + region | radiogroup > radio |
| 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. |