Boîtes d’alerte modales (popins d’alerte)

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

Sommaire

Principe

Les boîtes d’alerte modales sont un cas particulier de boîtes de dialogue modales, elles-mêmes un sous-genre de fenêtres modales.

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

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

Socle HTML

Le socle HTML d’une boîte d’alerte modale varie légèrement selon qu’elle possède ou non un titre affiché à l’écran.

Boîte d’alerte modale avec titre affiché à l’écran


<div role="alertdialog" aria-labelledby="titre-modale" aria-describedby="message-modale">
  <h1 id="titre-modale">Titre de la boîte d’alerte modale</h1>
  <p id="message-modale">Message de la boîte d’alerte modale.</p>
  <button>Annuler</button>
  <button>[Action par défaut]</button>
</div>

Boîte d’alerte modale sans titre affiché à l’écran


<div role="alertdialog" aria-label="Titre de la boîte d’alerte modale" aria-describedby="message-modale">
  <p id="message-modale">Message de la boîte d’alerte modale.</p>
  <button>Annuler</button>
  <button>[Action par défaut]</button>
</div>

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

Interaction au clavier

Tab

Lorsque la boîte d’alerte modale est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la boîte d’alerte modale. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la boîte d’alerte 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 boîte 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 boîte 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 boîte d’alerte modale.

Entrée

Lorsque la boîte d’alerte modale est affichée, déclenche l’action par défaut de la boîte d’alerte modale.

Comportement attendu

Lorsque la boîte d’alerte modale est affichée à l’écran

Lorsque la boîte d’alerte modale est fermée

Remarques

Dans la situation où les conteneurs HTML de la boîte d’alerte modale et celui du reste de la page sont frères dans le code source, c’est-à-dire au même niveau hiérarchique dans l’arbre DOM, appliquer un attribut aria-hidden="true" sur le conteneur du reste de la page, lorsque la boîte d’alerte modale est affichée :


<body>
  <div aria-hidden="true">
    [Contenu du reste de la page]
  </div>
  <div role="alertdialog" aria-labelledby="titre-modale" aria-describedby="message-modale">
    <h1 id="titre-modale">Titre de la boîte d’alerte modale</h1>
    <p id="message-modale">Message de la boîte d’alerte modale.</p>
    <button>Annuler</button>
    <button>[Action par défaut]</button>
  </div>
</body>

Supprimer ensuite l’attribut aria-hidden="true" appliqué sur le conteneur du reste de la page, lorsque la boîte d’alerte modale est fermée :


<body>
  <div>
    [Contenu du reste de la page]
  </div>
</body>

Composants

Les composants ci-après 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, variables en fonction de la version utilisée.

  1. Alert Dialog.

1 commentaire

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h22.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

Ajouter un commentaire

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

Haut de page