aria-modal

Quand l’utiliser

Sur un élément role="dialog" ou role="alertdialog" qui doit bloquer toute interaction avec le reste de la page lorsqu’il est ouvert. Définir aria-modal="true" confine le curseur virtuel du lecteur d’écran à la boîte de dialogue et annonce le contenu en arrière-plan comme inaccessible.

Une boîte de dialogue modale a trois responsabilités :

1. aria-modal="true" — indique à la technologie d’assistance qu’il s’agit d’une fenêtre modale.
2. Arrière-plan inerte — appliqué via l’attribut inert sur le contenu environnant, ou par un piège de focus géré en JavaScript. Sans cela, les utilisateurs au clavier peuvent sortir de la boîte de dialogue par tabulation.
3. Focus initial — déplace le focus dans la boîte de dialogue à son ouverture et le rend au déclencheur à sa fermeture.

aria-modal couvre uniquement la partie lecteur d’écran ; il n’empêche pas un utilisateur clavier de sortir de la boîte de dialogue par tabulation. La prise en charge par les navigateurs de l’inertie déduite d’aria-modal est inconsistante — combinez toujours les deux approches.

L’élément HTML natif <dialog> avec .showModal() gère les trois automatiquement. Préférez-le lorsque c’est possible.

Comment le maintenir synchronisé

Les valeurs valides sont "true" et "false". Définissez "true" pendant que la boîte de dialogue est ouverte ; supprimez l’attribut ou définissez "false" lorsqu’elle est fermée (en général la boîte fermée n’est pas dans le DOM, l’attribut est donc sans effet).

aria-modal est associé à deux attributs d’étiquetage :

• aria-labelledby="<dialog-title-id>" — pointe vers l’en-tête visible.
• aria-describedby="<dialog-body-id>" — facultatif, pour une courte description.

Ensemble, ils donnent au lecteur d’écran une annonce d’ouverture cohérente : « Boîte de dialogue, Supprimer le compte ?, Cette action est irréversible. »

Échecs courants

• aria-modal="true" sans piège de focus — les utilisateurs clavier sortent de la boîte de dialogue.
• Utiliser aria-modal sur une infobulle ou un menu contextuel non modal. Réservez role="dialog" aux vraies boîtes de dialogue modales ; un popover n’est pas une boîte de dialogue.
• aria-labelledby manquant — le lecteur d’écran annonce « Boîte de dialogue » sans nom.
• Absence de déplacement du focus dans la boîte de dialogue à son ouverture.
• Absence de restauration du focus vers le déclencheur d’origine à la fermeture.
• Masquer l’arrière-plan avec aria-hidden="true" au lieu d’inert — le focus clavier s’échappe quand même ; seul le curseur du lecteur d’écran est contraint.
• Deux fenêtres modales simultanément ouvertes avec aria-modal="true". L’arbre d’accessibilité est perturbé ; affichez-en une seule à la fois.

Exemple

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">Delete account?</h2>
  <p id="confirm-body">This action cannot be undone.</p>

  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete</button>
</div>