La fin des "Modale Hell"

Pendant des années, créer une fenêtre modale accessible était un calvaire : gérer le z-index, piéger le focus à l'intérieur, empêcher le scroll de l'arrière-plan... Aujourd'hui, la balise <dialog> fait tout ça nativement.

L'implémentation

Voici un exemple minimaliste et parfaitement accessible :

<!-- Le bouton déclencheur -->
<button onclick="window.myModal.showModal()">Ouvrir la modale</button>

<!-- La modale native -->
<dialog id="myModal">
  <h2>Confirmation</h2>
  <p>Voulez-vous vraiment supprimer cet élément ?</p>

  <!-- Ce formulaire ferme la modale automatiquement sans JS -->
  <form method="dialog">
    <button value="cancel">Annuler</button>
    <button value="confirm" autofocus>Confirmer</button>
  </form>
</dialog>

Pourquoi c'est mieux pour l'accessibilité ?

1. Focus Trap : Le navigateur empêche nativement de tabuler en dehors de la modale ouverte.
2. Échap : La touche Esc ferme la modale par défaut.
3. Sémantique : Les lecteurs d'écran annoncent correctement qu'il s'agit d'une boîte de dialogue.

Plus besoin de aria-hidden="true" sur le reste de la page !