Comparaison comportementale
Visionneuse modale vs Boîte de dialogue modale
Différence décisive
La Visionneuse modale est une composition dédiée aux médias ; la Boîte de dialogue modale accueille une tâche délimitée comme un formulaire.
Critères de choix, liens et sources
- Visionneuse modaleChoisis Visionneuse modale si consulter ou parcourir des images ou vidéos est la tâche principale.Ouvrir la fiche Visionneuse modale
- Boîte de dialogue modaleChoisis Boîte de dialogue modale si l’utilisateur remplit un formulaire ou accomplit une autre tâche délimitée.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 ?
Visionneuse modale
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.
Visionneuse modale
Mission
Visionneuse d'images - Lightbox
Ouvrir la deuxième image, passer à la suivante au clavier, puis fermer et revenir sur la même miniature.
É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
- La photo sélectionnée est agrandie avec sa légende, sa position dans l'ensemble et les contrôles de navigation.
- Cas limite
- Un échec de chargement conserve la légende et la navigation, explique l'erreur par du texte et ne laisse jamais une modale vide.
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
Lightbox est une composition modale dédiée aux médias ; une Boîte de dialogue modale traite les tâches et un Dialogue d'alerte traite une décision sensible.
Lequel convient à ton besoin ?
Visionneuse modale
Examiner des photos produit en grand
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
Différence et sources
Lightbox est une composition modale dédiée aux médias ; une Boîte de dialogue modale traite les tâches et un Dialogue d'alerte traite une décision sensible.
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
Visionneuse modale
Examiner des photos produit en grand
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
- Focus
Visionneuse modale
L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine.
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
Visionneuse modale
Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen.
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
Visionneuse modale
La sélection d’une vignette ou d’un aperçu ouvre la consultation ciblée.
Boîte de dialogue modale
Une action explicite lance une tâche courte et délimitée.
- Modalité
Visionneuse modale
Visionneuse de média modale ; la page sous-jacente est temporairement inactive.
Boîte de dialogue modale
Modale ; le reste de la page devient inerte jusqu’à la fermeture de la tâche.
- Positionnement
Visionneuse modale
Le média est centré ou ajusté dans une superposition, avec ses contrôles à proximité.
Boîte de dialogue modale
Une surface dans la fenêtre, souvent centrée, avec défilement interne si nécessaire.
- Interactivité
Visionneuse modale
Peut proposer précédent, suivant, zoom, légende et fermeture autour du média.
Boîte de dialogue modale
Accueille un ensemble ciblé de champs et d’actions dans une zone de focus contenue.
- Focus
Visionneuse modale
L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine.
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
Visionneuse modale
Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen.
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
Visionneuse modale
dialog[aria-modal=true]
Boîte de dialogue modale
dialog[aria-modal=true]
- Cas d’usage
Visionneuse modale
Examiner des photos produit en grand
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
- Comportement mobile
Visionneuse modale
Ajuster le média à la fenêtre sûre et doubler les gestes facultatifs par des contrôles nommés et tactiles.
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 | Visionneuse modaleLightbox | Boîte de dialogue modaleModal dialog |
|---|---|---|
| Déclenchement | La sélection d’une vignette ou d’un aperçu ouvre la consultation ciblée. | Une action explicite lance une tâche courte et délimitée. |
| Modalité | Visionneuse de média modale ; la page sous-jacente est temporairement inactive. | Modale ; le reste de la page devient inerte jusqu’à la fermeture de la tâche. |
| Positionnement | Le média est centré ou ajusté dans une superposition, avec ses contrôles à proximité. | Une surface dans la fenêtre, souvent centrée, avec défilement interne si nécessaire. |
| Interactivité | Peut proposer précédent, suivant, zoom, légende et fermeture autour du média. | Accueille un ensemble ciblé de champs et d’actions dans une zone de focus contenue. |
| Focus | L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine. | 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 | Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen. | 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 | dialog[aria-modal=true] | dialog[aria-modal=true] |
| Cas d’usage | Examiner des photos produit en grand | Modifier une fiche compacte sans perdre le contexte |
| Comportement mobile | Ajuster le média à la fenêtre sûre et doubler les gestes facultatifs par des contrôles nommés et tactiles. | Utiliser l’essentiel de la largeur, respecter les zones sûres et garder le champ actif au-dessus du clavier. |