Comment faire accessibilité et éco-conception @Démo publique

Fiche: Messages et alertes

Exemple un choix utilisateur

Lorsqu'un utilisateur effectue un choix dans une page, celui-ci peut entraîner la nécessité à afficher un message ou un alerte en utilisant simplement un message ephémère à l'écran

Plusieurs éléments liés à l'accessibilité doivent être respectés :

  • Le message doit rester à l'écran le temps que tous les utilisateurs puissent le lire correctement. L'idéal est de le laisser affiché et que l'utilisateur le fasse disparaê par lui-même.
  • Que les lecteur d'écran ou aide technique puisse lire et énoncé ce message dans les bonne condition d'audition et de priorité.
  • La prise de focus reste inchangée, ce n'est pas parce que l'on informe l'utilisateru qu'il doit être transporté à un point de l'interface.
  • Le mécanisme doit fonctionné aussi bine lors d'un action clavier que suite à une action pointeur (souris).

Implémentation

Dans cet exemple, où la sélection ou déselection d'un case à cocher entraîne l'apparition d'un message, ces principes sont respectés :

  • Le message est à faire disparaître par l'utilisateur (bouton ou touche [Echap]). Le message disparaît de lui-même après 10 minutes qui sembel un délai raisonnable.
  • Un mécanisme d'alerte ARIA est utilisé pour énoncé le message.
  • Les case à cocher prennent bien le focus et l'ordre de tabulation reste correct.
  • Le fait d'utiliser des cases à cocher facile la gestion clavier / souris, cet élément HTML gérant nativement les 2.

Ainsi, lorsqu'une case à cocher est actionnée, un message apparaît et une alerte ARIA est émise mais sans changement de focus. Il s'agit simplement d'une information.

Quelques cases à cocher