aria-modal

Description

aria-modal="true" signale aux technologies d’assistance que le dialog ouvert est modal, et que le reste de la page doit être traité comme inaccessible tant que le dialog est ouvert. Cela complète le blocage visuel et de focus déjà mis en place en JavaScript.

Syntaxe

<div role="dialog" aria-modal="true" aria-labelledby="dialog-titre">
  <h2 id="dialog-titre">Titre de la boîte de dialogue</h2>
  …
</div>

Exemples

Dialog de confirmation :

<div role="dialog"
     aria-modal="true"
     aria-labelledby="confirm-titre"
     aria-describedby="confirm-desc">
  <h2 id="confirm-titre">Supprimer le compte</h2>
  <p id="confirm-desc">Cette action est irréversible. Toutes vos données seront effacées.</p>
  <button>Confirmer la suppression</button>
  <button>Annuler</button>
</div>

Notes

Ne remplace pas le piège de focus : aria-modal est une déclaration sémantique — il faut toujours implémenter un focus trap en JavaScript pour empêcher l’utilisateur de naviguer hors du dialog au clavier.

Utiliser <dialog> natif de préférence : l’élément HTML <dialog> gère nativement la modalité, le piège de focus et aria-modal. C’est la solution recommandée.

Ne pas appliquer sur des elements non-dialog : aria-modal ne s’applique qu’aux éléments avec role="dialog" ou role="alertdialog".