ARIA : rôle alert

Le rôle alert est utilisé pour communiquer un message important, et généralement urgent, à la personne. Lorsque ce rôle est ajouté à un élément, le navigateur enverra un évènement d'alerte accessible aux outils d'assistance qui pourront alors notifier la personne.

Le rôle alert doit uniquement être utilisé pour les informations qui nécessitent une attention immédiate, comme :

• Une valeur invalide a été saisie dans un champ d'un formulaire
• L'identifiant associé à la session va bientôt expirer
• La connexion au serveur a été rompue et les changements locaux ne seront pas enregistrés

Le rôle alert doit uniquement être utilisé pour le contenu texte et pas pour les éléments interactifs comme les liens ou les boutons. Il n'est pas nécessaire que les éléments avec le rôle alert puissent recevoir le focus, les outils d'assistance annonceront le contenu mis à jour lorsque le rôle est ajouté, quel que soit l'état du focus.

Le rôle alert est à ajouter au nœud contenant le message d'alerte, il ne doit pas être ajouté à l'élément qui a déclenché l'alerte. Les alertes sont des régions dynamiques assertives. Utiliser role="alert" sera équivalent à définir aria-live="assertive" et aria-atomic="true". Ces régions n'ayant pas besoin du focus, il n'a pas à être géré et aucune interaction utilisateur ne doit être requise.

Le rôle alert est l'un des cinq rôles associés aux régions dynamiques. Les modifications dynamiques moins urgentes doivent utiliser une méthode moins agressive, par exemple en incluant aria-live="polite" ou en utilisant un autre rôle de région dynamique comme status. Si la personne doit pouvoir fermer l'alerte, on utilisera plutôt le rôle alertdialog.

Le rôle alert est destiné au contenu affiché dynamiquement, pas pour le contenu qui apparaît au chargement initial de la page. Ce rôle est idéal pour les scénarios où une personne remplit un formulaire et où JavaScript est utilisé afin d'ajouter un message d'erreur : l'alerte serait alors immédiatement énoncée. alert ne doit pas être utilisé pour des éléments HTML avec lesquels la personne n'a pas interagi. Ainsi, si une page est affichée et contient dès le début plusieurs alertes dans son contenu, le rôle alert ne doit pas être utilisé, car les messages n'ont pas été déclenchés dynamiquement.

À l'instar des autres régions dynamiques, les alertes doivent uniquement être annoncées lorsque le contenu de l'élément ayant role="alert" est mis à jour. Assurez-vous que l'élément avec le rôle est initialement présent dans le balisage de la page, cela permettra d'amorcer le navigateur et le lecteur d'écran qui surveilleront alors les changements sur l'élément. Une fois que ce cadre initial est mis en place, tout changement apporté au contenu sera annoncé. Il faut éviter de générer ou d'ajouter de façon dynamique des éléments role="alert" contenant déjà le message d'alerte voulu, cela n'entraînera pas d'annonce et ne correspond à pas un changement de contenu.

Lorsque le rôle alert est présent, chaque changement apporté au contenu est annoncé, et il faut donc l'utiliser avec parcimonie. Par définition, les alertes sont perturbantes. S'il y a plusieurs alertes simultanées ou des alertes inutiles, l'ergonomie sera médiocre.

Nous allons voir ici des exemples de scénarios usuels d'utilisation alert et comment les implémenter.

Si le contenu situé à l'intérieur de l'élément doté de role="alert" est initialement masqué à l'aide de CSS, le rendre visible déclenchera l'alerte. Cela signifie qu'on peut réutiliser à plusieurs reprises un élément qui agit comme un conteneur d'alerte existant.

.hidden {
  display: none;
}

<div id="expirationWarning" role="alert">
  <span class="hidden">Votre session va expirer dans 2 minutes.</span>
</div>

// En retirant la classe 'hidden', le contenu à l'intérieur de l'élément devient
// visible et le lecteur d'écran annoncera l'alerte.
document
  .getElementById("expirationWarning")
  .firstChild.classList.remove("hidden");

À l'aide de JavaScript, on peut modifier dynamiquement le contenu à l'intérieur de l'élément ayant role="alert". Attention, si vous devez déclencher la même alerte à plusieurs reprises (autrement dit, si le contenu inséré dynamiquement est le même d'une fois à l'autre), cela ne sera pas perçu comme un changement et ne déclenchera pas d'annonce. Pour éviter ce problème, mieux vaudra réinitialiser le contenu du conteneur avant d'insérer le message d'alerte.

<div id="alertContainer" role="alert"></div>

// On vide le contenu
document.getElementById("alertContainer").innerHTML = "";
// Puis on injecte le nouveau message d'alerte
document.getElementById("alertContainer").innerHTML =
  "Votre session expirera dans " + expiration + " minutes";

Il est possible de masquer le conteneur d'alerte et de l'utiliser pour fournir des mises à jour/notifications qui seront explicitement destinées aux lecteurs d'écran. Cela peut s'avérer utile lorsque du contenu important de la page a été mis à jour et où la modification ne serait pas nécessairement flagrante pour une personne utilisant un lecteur d'écran.

Dans ces cas, il faut s'assurer que le conteneur n'est pas masqué à l'aide de display:none (qui le masquerait même des outils d'assistance et empêcherait toute notification). À la place, on pourra utiliser un style .visually-hidden.

<div id="hiddenAlertContainer" role="alert" class="visually-hidden"></div>

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// On vide le contenu
document.getElementById("hiddenAlertContainer").innerHTML = "";
// Puis on injecte le nouveau message d'alerte
document.getElementById("hiddenAlertContainer").innerHTML =
  "Tous les objets ont été retirés du panier.";

• aria-live
• aria-atomic
• Rôle ARIA log
• Rôle ARIA marquee
• Rôle ARIA status
• Rôle ARIA timer
• Rôle ARIA alertdialog
• Régions dynamiques ARIA
• Prise en charge du rôle ARIA alert, The Paciello Group (en anglais)
• Exemple d'utilisation d'alert (en anglais)