Rôles de fenêtre modale

Les rôles de fenêtre modale définissent des sous-fenêtres de la page principale du document, au sein même de cette page.

Les fenêtres modales sont des fenêtres ou des boîtes de dialogue visuellement placées par dessus le contenu de la page ; le fond est opacifié. Lors de l’implémentation d’une fenêtre modale, on peut recourir à deux rôles aria spécifiques : dialog et alertdialog. Pour autant le seul ajout de l’un de ces rôles n’est pas suffisant pour rendre une boîte de dialogue accessible.

Rôle dialog

Pour rendre une fenêtre modale accessible avec le rôle dialog, il faut veiller à ce que que :

• La boîte de dialogue présente un titre de niveau 1 (h1) puisqu’on considère qu’il y a eu un changement de contexte (un peu comme s’il s’agissait d’une nouvelle page).
• La boîte de dialogue doit être correctement labélisée à l’aide de aria-labelledby qui fera référence à l’id du titre de niveau 1 de la boîte de dialogue;
• Le focus clavier ne sort pas de la boîte de dialogue ; il doit « boucler ».
• La fenêtre modale se ferme avec la touche Echap.

Rôle alertdialog

Le rôle alertdialog est sensiblement similaire au rôle dialog.
La différence porte sur le caractère urgent du contenu de la fenêtre modale. Le rôle alertdialog doit donc être utilisé pour des alertes, des erreurs ou des avertissements nécessitant une action rapide de l’utilisateur.

Du fait de sa nature urgente, les boîtes de dialogues d’alertes de type alertdialog doivent toujours être modales.

Exemple de code HTML

<div
  role="alertdialog"
  aria-labelledby="dialogTitre"
  aria-describedby="dialogDesc">
  <div role="document" tabindex="0">
    <h1 id="dialogTitre">Votre session est sur le point d’expirer</h1>
    <p id="dialogDesc">Pour prolonger votre session, cliquez sur le bouton OK</p>
    <button>OK</button>
  </div>
</div>