SkillCodexOuvrir les favoris et l’historique
Mesure d'audience
Avec ton accord, Google Analytics mesure l'usage du site pour nous aider à l'améliorer. Ton choix est mémorisé sur cet appareil et reste modifiable via « Cookies » en pied de page.
Comparaison comportementale
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.
Décision
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
Choisis Visionneuse modale lorsque consulter ou parcourir un média est la tâche principale ; choisis Boîte de dialogue modale pour un formulaire ou une autre tâche.
| 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. |
