Comparaison comportementale
Menu d'actions déroulant vs Fenêtre contextuelle
Différence décisive
Le Menu d’actions déroulant est une liste de commandes avec la navigation clavier d’un menu ; la Fenêtre contextuelle accueille un contenu ou des contrôles libres.
Critères de choix, liens et sources
- Menu d'actions déroulantChoisis Menu d’actions déroulant si chaque élément est une action comme Modifier ou Archiver.Ouvrir la fiche Menu d'actions déroulant
- Fenêtre contextuelleChoisis Fenêtre contextuelle si le contenu est explicatif ou interactif sans se limiter à une liste d’actions.Ouvrir la fiche Fenêtre contextuelle
Voir les neuf dimensionsVoir les sources
Petites surfaces contextuelles
Essayer
As-tu besoin d’une explication brève, d’un contenu contextuel interactif ou d’une liste d’actions ?
Contexte commun aux essais
Un espace projet doit révéler une aide brève, des détails complémentaires ou une courte liste d'actions depuis un contrôle compact sans quitter la tâche en cours.
Menu d'actions déroulant
Fenêtre contextuelle
Mission
Fenêtre contextuelle - Popover
Ouvrir l'explication, parcourir son ordre de focus, puis la fermer sans perdre sa position.
Détail de la facture
Une ligne de service et les frais associés.
É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
- Le panneau non modal s'ouvre près du libellé de facturation et son lien peut recevoir le focus.
- Cas limite
- Quand l'espace manque, la gestion des collisions repositionne le panneau sans couvrir le déclencheur ni déplacer le focus de façon inattendue.
Ce que cet essai montre
Utiliser le Menu d'actions déroulant pour des commandes comme Modifier ou Archiver, pas pour choisir une valeur de formulaire comme Select ni pour un contenu riche comme Popover.
Lequel convient à ton besoin ?
Menu d'actions déroulant
Regrouper les actions secondaires d'un élément
Fenêtre contextuelle
Afficher une explication compacte avec un lien
Différence et sources
Utiliser le Menu d'actions déroulant pour des commandes comme Modifier ou Archiver, pas pour choisir une valeur de formulaire comme Select ni pour un contenu riche comme Popover.
Consulter les sourcesParties du spécimen
Décision
Question de famille
As-tu besoin d’une explication brève, d’un contenu contextuel interactif ou d’une liste d’actions ?
Trois critères pour choisir
- Déclenchement
Menu d'actions déroulant
Bouton de menu activé par appui, clic, Entrée, Espace ou Flèche bas.
Fenêtre contextuelle
Appui ou clic explicite sur un déclencheur nommé.
- Interactivité
Menu d'actions déroulant
Une collection d’actions avec focus clavier géré, pas un contenu de formulaire arbitraire.
Fenêtre contextuelle
Peut contenir des liens ou contrôles ; le focus ne se déplace que si l’interaction l’exige.
- Focus
Menu d'actions déroulant
L'ouverture place le focus du menu sur un élément disponible ; la fermeture le restaure sur le déclencheur.
Fenêtre contextuelle
Le focus reste sur le déclencheur pour un contenu simple ou va de façon prévisible vers le premier contrôle pertinent.
Neuf dimensions
- Déclenchement
Menu d'actions déroulant
Bouton de menu activé par appui, clic, Entrée, Espace ou Flèche bas.
Fenêtre contextuelle
Appui ou clic explicite sur un déclencheur nommé.
- Modalité
Menu d'actions déroulant
Surface d’actions non modale qui se ferme après un choix, Échap ou une action extérieure.
Fenêtre contextuelle
Généralement non modale ; le contenu alentour reste utilisable.
- Positionnement
Menu d'actions déroulant
Ancrée au bouton de menu et alignée dans les limites de la fenêtre.
Fenêtre contextuelle
Ancrée près du déclencheur avec un placement qui évite les collisions.
- Interactivité
Menu d'actions déroulant
Une collection d’actions avec focus clavier géré, pas un contenu de formulaire arbitraire.
Fenêtre contextuelle
Peut contenir des liens ou contrôles ; le focus ne se déplace que si l’interaction l’exige.
- Focus
Menu d'actions déroulant
L'ouverture place le focus du menu sur un élément disponible ; la fermeture le restaure sur le déclencheur.
Fenêtre contextuelle
Le focus reste sur le déclencheur pour un contenu simple ou va de façon prévisible vers le premier contrôle pertinent.
- Fermeture
Menu d'actions déroulant
Sélectionner une action, appuyer sur Échap ou cliquer sans risque à l'extérieur ferme le menu.
Fenêtre contextuelle
Échap, le contrôle de fermeture ou un appui extérieur sans risque la ferme et restaure le focus sur le déclencheur.
- Rôle accessible
Menu d'actions déroulant
menu > menuitem
Fenêtre contextuelle
dialog
- Cas d’usage
Menu d'actions déroulant
Regrouper les actions secondaires d'un élément
Fenêtre contextuelle
Afficher une explication compacte avec un lien
- Comportement mobile
Menu d'actions déroulant
Ouvrir au toucher, garder de grandes cibles et préférer une feuille d’actions pour un menu dense.
Fenêtre contextuelle
Conserver un déclencheur facile à toucher et préférer une surface plus grande si le contenu devient complexe.
| Dimension | Menu d'actions déroulantDropdown menu | Fenêtre contextuellePopover |
|---|---|---|
| Déclenchement | Bouton de menu activé par appui, clic, Entrée, Espace ou Flèche bas. | Appui ou clic explicite sur un déclencheur nommé. |
| Modalité | Surface d’actions non modale qui se ferme après un choix, Échap ou une action extérieure. | Généralement non modale ; le contenu alentour reste utilisable. |
| Positionnement | Ancrée au bouton de menu et alignée dans les limites de la fenêtre. | Ancrée près du déclencheur avec un placement qui évite les collisions. |
| Interactivité | Une collection d’actions avec focus clavier géré, pas un contenu de formulaire arbitraire. | Peut contenir des liens ou contrôles ; le focus ne se déplace que si l’interaction l’exige. |
| Focus | L'ouverture place le focus du menu sur un élément disponible ; la fermeture le restaure sur le déclencheur. | Le focus reste sur le déclencheur pour un contenu simple ou va de façon prévisible vers le premier contrôle pertinent. |
| Fermeture | Sélectionner une action, appuyer sur Échap ou cliquer sans risque à l'extérieur ferme le menu. | Échap, le contrôle de fermeture ou un appui extérieur sans risque la ferme et restaure le focus sur le déclencheur. |
| Rôle accessible | menu > menuitem | dialog |
| Cas d’usage | Regrouper les actions secondaires d'un élément | Afficher une explication compacte avec un lien |
| Comportement mobile | Ouvrir au toucher, garder de grandes cibles et préférer une feuille d’actions pour un menu dense. | Conserver un déclencheur facile à toucher et préférer une surface plus grande si le contenu devient complexe. |