Comparaison comportementale
Dialogue d'alerte vs Boîte de dialogue modale
Différence décisive
Le Dialogue d’alerte interrompt pour une seule décision à confirmer ou annuler ; la Boîte de dialogue modale accueille une tâche délimitée plus large, comme un formulaire.
Critères de choix, liens et sources
- Dialogue d'alerteChoisis Dialogue d’alerte si l’utilisateur doit confirmer ou annuler une action lourde de conséquences, sans autre saisie.Ouvrir la fiche Dialogue d'alerte
- Boîte de dialogue modaleChoisis Boîte de dialogue modale si la tâche demande plusieurs champs ou étapes tout en gardant la page en arrière-plan.Ouvrir la fiche Boîte de dialogue modale
Voir les neuf dimensionsVoir les sources
Surfaces modales
Essayer
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
Dialogue d'alerte
Contexte commun aux essais
Un élément de projet ouvre une surface ciblée tandis que l'espace sous-jacent reste indisponible jusqu'à ce que l'utilisateur termine ou ferme cette surface.
Dialogue d'alerte
Mission
Confirmation sensible - Alert dialog
Ouvrir l'avertissement, lire la conséquence nommée, annuler au clavier, puis rouvrir et confirmer volontairement.
É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'avertissement nomme l'espace, explique la perte définitive et place d'abord le focus sur l'action sûre Conserver.
- Cas limite
- Pendant l'envoi de la suppression, les deux actions empêchent une double activation et le dialogue annonce l'attente.
Boîte de dialogue modale
Mission
Fenêtre modale - Modal dialog
Ouvrir le dialogue, parcourir tous les contrôles avec Tab, annuler avec Échap et vérifier le retour du focus sur Modifier le membre.
É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 formulaire s'ouvre avec son titre annoncé et le focus sur le premier champ utile.
- Cas limite
- Une erreur de validation garde le dialogue ouvert, relie le message au champ invalide et ne déplace le focus qu'après l'échec de l'envoi.
Ce que cet essai montre
Un Dialogue d'alerte sert à une décision courte et sensible, pas à un formulaire général ni à une visionneuse de média.
Lequel convient à ton besoin ?
Dialogue d'alerte
Confirmer une suppression définitive
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
Différence et sources
Un Dialogue d'alerte sert à une décision courte et sensible, pas à un formulaire général ni à une visionneuse de média.
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.
Voile de fond
La couche qui sépare une surface modale du contenu de page inactif.
Décision
Question de famille
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
Trois critères pour choisir
- Cas d’usage
Dialogue d'alerte
Confirmer une suppression définitive
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
- Focus
Dialogue d'alerte
Le focus initial va sur l'action utile la moins destructive, sauf s'il est plus sûr de lire d'abord de longues conséquences.
Boîte de dialogue modale
L'ouverture déplace le focus à l'intérieur, Tab n'atteint pas la page inerte et la fermeture restaure le focus sur le déclencheur logique.
- Fermeture
Dialogue d'alerte
Seule une décision explicite ou une annulation sûre documentée ferme l'alerte ; aucun délai ni appui extérieur accidentel ne la ferme.
Boîte de dialogue modale
Annuler, le contrôle de fermeture nommé et Échap ferment sans enregistrer ; l'appui extérieur n'est permis que si une perte accidentelle est sans conséquence.
Neuf dimensions
- Déclenchement
Dialogue d'alerte
Une action sensible atteint le point où une confirmation explicite est requise.
Boîte de dialogue modale
Une action explicite lance une tâche courte et délimitée.
- Modalité
Dialogue d'alerte
Strictement modale ; aucune interaction avec l’arrière-plan avant la décision.
Boîte de dialogue modale
Modale ; le reste de la page devient inerte jusqu’à la fermeture de la tâche.
- Positionnement
Dialogue d'alerte
Une surface compacte et saillante dans la fenêtre, proche du contexte de décision.
Boîte de dialogue modale
Une surface dans la fenêtre, souvent centrée, avec défilement interne si nécessaire.
- Interactivité
Dialogue d'alerte
Propose des décisions explicites de confirmation et d’annulation ; ne disparaît ni avec un délai ni par simple appui extérieur.
Boîte de dialogue modale
Accueille un ensemble ciblé de champs et d’actions dans une zone de focus contenue.
- Focus
Dialogue d'alerte
Le focus initial va sur l'action utile la moins destructive, sauf s'il est plus sûr de lire d'abord de longues conséquences.
Boîte de dialogue modale
L'ouverture déplace le focus à l'intérieur, Tab n'atteint pas la page inerte et la fermeture restaure le focus sur le déclencheur logique.
- Fermeture
Dialogue d'alerte
Seule une décision explicite ou une annulation sûre documentée ferme l'alerte ; aucun délai ni appui extérieur accidentel ne la ferme.
Boîte de dialogue modale
Annuler, le contrôle de fermeture nommé et Échap ferment sans enregistrer ; l'appui extérieur n'est permis que si une perte accidentelle est sans conséquence.
- Rôle accessible
Dialogue d'alerte
alertdialog[aria-modal=true]
Boîte de dialogue modale
dialog[aria-modal=true]
- Cas d’usage
Dialogue d'alerte
Confirmer une suppression définitive
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
- Comportement mobile
Dialogue d'alerte
Garder la conséquence lisible et séparer l’action destructive de l’action sûre avec de grandes cibles.
Boîte de dialogue modale
Utiliser l’essentiel de la largeur, respecter les zones sûres et garder le champ actif au-dessus du clavier.
| Dimension | Dialogue d'alerteAlert dialog | Boîte de dialogue modaleModal dialog |
|---|---|---|
| Déclenchement | Une action sensible atteint le point où une confirmation explicite est requise. | Une action explicite lance une tâche courte et délimitée. |
| Modalité | Strictement modale ; aucune interaction avec l’arrière-plan avant la décision. | Modale ; le reste de la page devient inerte jusqu’à la fermeture de la tâche. |
| Positionnement | Une surface compacte et saillante dans la fenêtre, proche du contexte de décision. | Une surface dans la fenêtre, souvent centrée, avec défilement interne si nécessaire. |
| Interactivité | Propose des décisions explicites de confirmation et d’annulation ; ne disparaît ni avec un délai ni par simple appui extérieur. | Accueille un ensemble ciblé de champs et d’actions dans une zone de focus contenue. |
| Focus | Le focus initial va sur l'action utile la moins destructive, sauf s'il est plus sûr de lire d'abord de longues conséquences. | L'ouverture déplace le focus à l'intérieur, Tab n'atteint pas la page inerte et la fermeture restaure le focus sur le déclencheur logique. |
| Fermeture | Seule une décision explicite ou une annulation sûre documentée ferme l'alerte ; aucun délai ni appui extérieur accidentel ne la ferme. | Annuler, le contrôle de fermeture nommé et Échap ferment sans enregistrer ; l'appui extérieur n'est permis que si une perte accidentelle est sans conséquence. |
| Rôle accessible | alertdialog[aria-modal=true] | dialog[aria-modal=true] |
| Cas d’usage | Confirmer une suppression définitive | Modifier une fiche compacte sans perdre le contexte |
| Comportement mobile | Garder la conséquence lisible et séparer l’action destructive de l’action sûre avec de grandes cibles. | Utiliser l’essentiel de la largeur, respecter les zones sûres et garder le champ actif au-dessus du clavier. |