Dialog / Modale — Démo interactive

Testez le composant <dialog> natif. Utilisez Échap pour fermer, Tab/Shift+Tab pour naviguer. Testez aussi avec un lecteur d'écran.

Exemple 1 : Dialog simple

Une modale basique avec titre, contenu, et bouton de fermeture.

Titre de la modale

Ceci est une modale accessible. Appuyez sur Échap pour fermer, ou cliquez sur le bouton Fermer.

Voir le code HTML 
<dialog id="dialog1" aria-labelledby="dialog1-title" aria-modal="true">
  <h2 id="dialog1-title">Titre de la modale</h2>
  <p>Contenu de la modale...</p>
  <form method="dialog">
    <button type="submit">Fermer</button>
  </form>
</dialog>

<button onclick="document.getElementById('dialog1').showModal()">
  Ouvrir la modale
</button>

À tester :

  • Clavier : Tab pour naviguer, Entrée/Espace sur bouton, Échap pour fermer
  • Lecteur d'écran : NVDA annonce « Boîte de dialogue, Titre de la modale »
  • Focus : après fermeture, le focus revient au bouton d'ouverture

Exemple 2 : Dialog avec formulaire

Une modale contenant un formulaire. L'envoi ou l'annulation ferme la modale.

Formulaire de contact
Voir le code HTML 
<dialog id="dialog2" aria-labelledby="dialog2-title" aria-modal="true">
  <h2 id="dialog2-title">Formulaire</h2>
  <form method="dialog">
    <label for="name">Nom</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />

    <button type="submit">Envoyer</button>
    <button type="button" onclick="this.closest('dialog').close()">
      Annuler
    </button>
  </form>
</dialog>

À tester :

  • Clavier : Tab entre champs, Entrée pour valider
  • Formulaire : click Envoyer ferme la modale avec returnValue
  • Annulation : click Annuler ferme sans validation
  • Lecteur d'écran : tous les labels annoncés correctement

Exemple 3 : Dialog imbriquée (cas limite)

Une modale ouvrant une autre modale. Testez le piège du focus et l'Échap.

Modale 1 (parent)

Ceci est la première modale. Vous pouvez en ouvrir une deuxième.

Modale 2 (enfant)

Ceci est la modale imbriquée. Appuyez sur Échap pour la fermer.
Voir le code HTML 
<!-- Modale parent -->
<dialog id="dialog3a" aria-labelledby="dialog3a-title" aria-modal="true">
  <h2 id="dialog3a-title">Modale 1</h2>
  <p>Contenu...</p>
  <button onclick="document.getElementById('dialog3b').showModal()">
    Ouvrir modale 2
  </button>
  <form method="dialog">
    <button type="submit">Fermer</button>
  </form>
</dialog>

<!-- Modale enfant -->
<dialog id="dialog3b" aria-labelledby="dialog3b-title" aria-modal="true">
  <h2 id="dialog3b-title">Modale 2</h2>
  <p>Modale imbriquée...</p>
  <form method="dialog">
    <button type="submit">Fermer</button>
  </form>
</dialog>

À tester :

  • Navigation : Tab ne sort pas de la modale 2 quand elle est ouverte
  • Échap : ferme uniquement la modale 2 (la plus récente)
  • Focus : focus retourne à Ouvrir modale 2 après fermeture de modale 2
  • Lecteur d'écran : NVDA annonce correctement le contexte

Notes d'accessibilité

  • `aria-labelledby` lie la modale à son titre (lecteur d'écran)
  • `aria-modal="true"` annonce « Boîte de dialogue » aux lecteurs d'écran
  • `
    ` ferme automatiquement et retourne le focus
  • Échap ferme la modale (gratuit, géré par le navigateur)
  • Focus trap : gratuit, géré par ``
← Lire la documentation complète