Alerte

L’alerte est un élément d’indication poussé par l’interface pour relayer une information à l’usager.

Le composant Alerte est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.

Interactions clavier

Aucune interaction au clavier spécifique au composant.

Règles d’accessibilité

Contenu de l’alerte

  • Le niveau de titre dépend du contexte de la page et ne sera pas toujours un <h3>.
  • Le type d’alerte (info, error, success, warning) doit être indiqué textuellement dans le contenu de l'alerte par les termes : « information », « erreur », « succès », ou « attention ».

Alertes avec bouton de fermeture

  • Les alertes refermables ont un bouton de fermeture avec un intitulé explicite (« Masquer le message »).
  • À la fermeture de l’alerte, le focus doit être repositionné à un endroit pertinent pour l’utilisateur

Alertes ajoutées dynamiquement

Une alerte ajoutée après le chargement de la page doit être perçue par tous les utilisateurs.

Pour les alertes simples, ajouter sur le conteneur de l’alerte :

  • un role="alert" pour les messages d’erreur ou les avertissements
  • un role="status" pour les messages de succès ou d’information.

Attention

Ne pas faire disparaître l’alerte sans action de l’utilisateur. Les alertes temporaires (toast) posent d’importants problèmes d’accessibilité et d’utilisabilité.

Restitution par les lecteurs d’écran

La restitution des rôles alert et status par les lecteurs d’écran varie selon les implémentations.

Le role="alert" est toujours correctement restitué par tous les lecteurs d’écran, peu importe la méthode d’implémentation, contrairement au role="status".

En cas de problème de restitution avec le role="status", il peut également être utilisé sur les messages d’information ou de succès.

Critères RGAA applicables

  • Couleurs : 3.2, 3.3
  • Scripts : 7.1, 7.3, 7.5
  • Éléments obligatoires : 8.9
  • Structuration : 9,1
  • Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.11, 10.12
  • Navigation : 12.8, 12.9
  • Consultation : 13.9, 13.11

Références

Ressources

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github