Composant accessible · outil gratuit

Modale accessible (boîte de dialogue) : code vérifié et explications

Une modale interrompt la page pour une décision ou une saisie. Accessible, elle a un nom annoncé, reçoit le focus à l'ouverture, rend le reste de la page inerte, se ferme au clavier et rend le focus au bouton qui l'a ouverte. L'élément HTML <dialog> ouvert avec showModal() fait l'essentiel de ce travail.

Critères RGAA 4.1.2 : 7.1, 7.3, 12.8, 12.9 · WCAG 2.2 : 4.1.2, 2.1.1, 2.1.2, 2.4.3 · mis à jour le 2 novembre 2026.

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Technique

Type de modale

alertdialog : focus initial sur l'action la moins risquée.

Titre de la modale

Texte

Bouton d'ouverture

Bouton de validation

Bouton d'annulation

Bouton « Fermer » en haut

Introduire une erreur fréquente

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<button type="button" class="ouvrir" data-modale="modale-1">Supprimer le rapport</button>

<dialog id="modale-1" class="modale" aria-labelledby="modale-1-titre" aria-describedby="modale-1-texte">
  <div class="modale-entete">
    <h2 id="modale-1-titre">Supprimer ce rapport ?</h2>
    <button type="button" class="modale-fermer" data-fermer aria-label="Fermer">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <p id="modale-1-texte">Le rapport et ses verdicts seront définitivement supprimés.</p>
  <div class="modale-actions">
    <button type="button" data-fermer>Annuler</button>
    <button type="button" class="principal" data-valider>Supprimer</button>
  </div>
</dialog>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

Personnes aveugles : sans nom ni focus déplacé, elles ne savent pas qu'une fenêtre s'est ouverte et continuent de lire la page derrière.
Personnes qui naviguent au clavier : si le focus reste derrière le voile, elles tabulent dans une page qu'elles ne voient plus ; s'il est perdu à la fermeture, elles repartent du haut de la page.
Personnes qui utilisent une loupe : une modale qui s'ouvre loin du bouton est hors de leur champ de vision ; le focus déplacé leur montre où regarder.
Personnes ayant des troubles cognitifs : une modale claire, avec un titre explicite et deux actions nommées, évite une décision prise par erreur.

Le comportement attendu

Au clavier

Touche ou moment	Ce qui doit se passer
Entrée ou Espace sur le bouton d'ouverture	Ouvre la modale ; le focus va sur son premier élément, ou sur l'action la moins risquée pour une confirmation.
Tab et Maj+Tab	Parcourent les éléments de la modale sans revenir sur la page derrière.
Échap	Ferme la modale, comme le bouton « Annuler ».
Après la fermeture	Le focus revient sur le bouton qui a ouvert la modale.

Avec un lecteur d'écran

À l'ouverture, le lecteur d'écran annonce « boîte de dialogue », le titre de la modale, puis sa description si elle est reliée par aria-describedby.
Tant qu'elle est ouverte, la page derrière n'est pas lue.
Une confirmation importante (alertdialog) peut être annoncée avec plus d'insistance selon le lecteur d'écran.

Les erreurs les plus fréquentes

Une modale en <div> sans rôle. Visuellement une fenêtre, mais rien n'indique aux technologies d'assistance qu'une boîte de dialogue est ouverte.
Le titre non relié. La modale est annoncée « boîte de dialogue » sans nom : il manque aria-labelledby vers son titre.
Le focus laissé sur la page. La modale s'affiche, mais le focus reste sur le bouton derrière le voile.
Le focus perdu à la fermeture. Après la fermeture, le focus repart du haut de la page au lieu de revenir au bouton d'ouverture.
Un bouton « × » sans nom. Le lecteur d'écran annonce « multiplication » ou rien du tout.
show() au lieu de showModal(). L'élément dialog s'affiche, mais n'est pas modal : la page derrière reste active.

Tester soi-même

Atteignez le bouton d'ouverture avec Tab et appuyez sur Entrée : le focus doit aller dans la modale.
Appuyez plusieurs fois sur Tab : le focus doit rester dans la modale.
Appuyez sur Échap : la modale doit se fermer et le focus revenir sur le bouton d'ouverture.
Avec un lecteur d'écran (NVDA, VoiceOver), vérifiez l'annonce « boîte de dialogue » suivie du titre.
Vérifiez que le titre et les intitulés des boutons disent clairement ce qui va se passer : ce jugement reste humain.

Ce qu'Accessia détecte dans un audit

Pendant un audit, une modale est le plus souvent fermée : l'analyse de la page ne la voit pas. Ouvrez-la, puis lancez le Vérificateur de l'extension Chrome : il applique axe-core à la modale affichée et signale les boutons sans nom et les attributs ARIA invalides. Le comportement (focus, Échap, retour du focus) ne se mesure qu'en utilisant la modale : c'est ce que fait le test de comportement ci-dessus, sur votre code comme sur le code généré.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

Faut-il encore coder un piège à focus ?

Pas avec l'élément dialog ouvert par showModal() : le navigateur rend le reste de la page inerte. Avec role="dialog" sur mesure, il faut rendre la page inerte (attribut inert) et faire tourner Tab dans la modale.

Le piège à focus d'une modale contredit-il le critère 12.9 ?

Non : garder le focus dans une modale ouverte est attendu, à condition de pouvoir la fermer au clavier. Le critère 12.9 vise un blocage dont on ne peut pas sortir.

Où mettre le focus à l'ouverture ?

Sur le premier élément utile ; pour une confirmation importante, sur l'action la moins risquée (« Annuler »). Pour un long contenu, sur le titre ou la modale elle-même (tabindex="-1").

dialog ou alertdialog ?

alertdialog convient à une demande de confirmation ou à une alerte qui exige une réponse ; dialog à tout le reste (formulaire, informations).

Ce code rend-il mon site conforme ?

Il rend ce composant conforme aux contrôles affichés. La pertinence des textes et le reste de la page restent à vérifier : seul un audit complet le dit.