Concevoir et tester une fenêtre de dialogue modale

Justifier l’interruption

Définissez ce que la personne doit décider et pourquoi elle ne peut pas poursuivre sans le faire. Réservez la confirmation aux conséquences qui demandent réellement une vérification. Une fenêtre répétée pour des actions faciles à annuler ralentit la tâche et peut rendre les confirmations importantes moins visibles.

Rédigez un titre qui nomme l’objet et deux actions explicites. Pour retirer une pièce jointe, « Retirer le document » est plus clair que « OK ». Expliquez si le retrait supprime le fichier définitivement ou le retire seulement du dossier affiché. Préservez les informations déjà saisies en cas d’annulation.

Prévoir le focus et la fermeture

Le modèle de dialogue W3C décrit un focus placé dans la fenêtre à l’ouverture, un parcours Tab contenu dans celle-ci et un retour logique après fermeture. Une fermeture visible et l’usage d’Échap permettent de quitter l’interruption. Ne déclarez pas une fenêtre modale si l’arrière-plan reste utilisable.

L’élément HTML dialog ouvert avec showModal() rend le reste du document inerte. Son usage ne décide pas du libellé, du choix initial ni de la sauvegarde. Testez la fenêtre réellement intégrée, y compris si le bouton d’ouverture disparaît après une suppression.

Traiter le contenu long et les opérations différées

Sur un petit écran, le titre et la fermeture doivent rester atteignables. Vérifiez le défilement de la fenêtre et évitez que le clavier du téléphone masque le champ actif. Si la lecture nécessaire devient longue, comparez une page dédiée plutôt que d’accumuler des fenêtres imbriquées.

Pour une opération distante, distinguez attente et réussite. Un échec doit conserver la décision et proposer une reprise compréhensible. Fermer l’interface ne prouve pas que l’opération serveur a été annulée : prévoyez un comportement explicite et évitez de promettre une annulation que le service ne sait pas effectuer.

Exemple : retirer un document d’un dossier

Exemple pédagogique : « Retirer devis.pdf de ce dossier ? » annonce l’objet et précise que le fichier d’origine reste conservé. La personne peut revenir sans changement. Après retrait, le message confirme le résultat et le focus rejoint une commande proche de la liste mise à jour. Le test vérifie aussi l’échec du retrait et l’absence du bouton initial, sans supprimer un vrai document.