Alert - Alerte

Bannière servant à afficher un retour d'information à l'utilisateur concernant une action ou un état.

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

  • Attributs ARIA utilisés :
    • aria-live="polite" : la vocalisation aura lieu lorsque le lecteur d'écran aura fini la tâche en cours
    • aria-atomic=”true”

 

Attributs de l’élément ayant un impact sur l’accessibilité

Attribut

Impact

alert-title

Ajoute un titre à l’alerte, avec les attributs role=”heading” et aria-level (cf header-level)

header-level

Le niveau aria-level du titre.

⚠️ Obligatoire si une valeur est ajoutée à l'attribut alert-title

open

Modifie la valeur de aria-hidden sur le contenu de l’alerte. Un passage à true déclenchera la vocalisation au lecteur d’écran.

closable

Ajoute un bouton de fermeture qui permet à l'utilisateur de rejeter l'alerte.

variant

Modifie les couleurs, l’icone et son nom accessible

 

Navigation et interaction clavier

Gestion du focus :

  • L’affichage du message d’alert n’affecte pas le focus.

 

Bonnes pratiques et pièges à éviter

 

Référence