Fenêtres d’alerte modales

Sommaire

Principe

Les boîtes d’alerte modales sont un cas particulier de fenêtres modales.

Elles renvoient une alerte concise ou demandent une confirmation rapide et sont adaptées lorsque :

Cette fiche s’appuie sur le motif de conception « Alert Dialog » détaillé dans les WAI-ARIA 1.1 Authoring Practices du W3C.

Socle HTML

Le socle HTML d’une fenêtre d’alerte modale est différent selon que cette dernière possède un titre affiché à l’écran ou non.

Fenêtre d’alerte modale avec un titre affiché à l’écran

<div role="alertdialog" aria-modal="true" aria-labelledby="modal-heading" aria-describedby="modal-content">
  <button>Fermer</button>
  <h1 id="modal-heading">[Titre de la modale]</h1>
  <p id="modal-content">[Contenu de la modale]</p>
</div>

Fenêtre d’alerte modale sans titre affiché à l’écran

<div role="alertdialog" aria-modal="true" aria-label="[Titre de la modale]" aria-describedby="modal-content">
   <button>Fermer</button>
   <p id="modal-content">[Contenu de la modale]</p>
 </div>

Rôles, états et propriétés ARIA

Interactions au clavier

Tab

Lorsque la fenêtre d’alerte modale est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la fenêtre d’alerte modale. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la boîte de dialogue modale au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la fenêtre d’alerte modale.

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture. Si le focus clavier est positionné au niveau du premier élément interactif contenu dans la fenêtre d’alerte modale au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier élément interactif contenu dans la fenêtre d’alerte modale.

Échap

Lorsque la boîte de dialogue modale est affichée, ferme la fenêtre d’alerte modale, et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la fenêtre d’alerte modale.

Comportements attendus

Lorsque la fenêtre d’alerte modale est affichée à l’écran

Lorsque la fenêtre d’alerte modale est fermée

Composants

Ces composants « Fenêtres d’alerte modales » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page