Aller au contenu

Comparaison comportementale

Visionneuse modale vs Boîte de dialogue modale

Choisir Visionneuse modale pour : Examiner des photos produit en grand. Choisir Boîte de dialogue modale pour : Modifier une fiche compacte sans perdre le contexte.

DimensionVisionneuse modaleLightboxBoîte de dialogue modaleModal dialog
DéclenchementLa 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.
PositionnementLe 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.
FocusL'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.
FermetureLe 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 accessibledialog with aria-modal=true containing figure contentdialog with aria-modal=true
Cas d’usageExaminer des photos produit en grandModifier une fiche compacte sans perdre le contexte
Comportement mobileAjuster 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.
Essayer Visionneuse modaleEssayer Boîte de dialogue modale