Modales et notifications

Les modales et les notifications permettent d'informer, de confirmer ou d'interrompre les actions de l'utilisateur. Les fenêtres modales sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.

Avantages

Inconvénients

Permet d'attirer l'attention de l'utilisateur sur un message important
Permettent faire une tâche secondaire sans quitter la tâche principale
Très forte visibilité, capte l'attention
Une modale est distincte du contenu principal, ce qui permet une plus grande liberté de mise en page
Évite le chargement d'une nouvelle page
Permet aux utilisateurs qui ont besoin de plus de détails d'y accéder sans déranger ceux qui n'en ont pas besoin

À utiliser pour des tâches critiques ou essentielles, sinon on ajoute de la friction à la tâche de l'utilisateur.
Les modales ne peuvent contenir beaucoup d'information.
La modale bloque partiellement ou complètement l'accès au contenu principal.
La fenêtre ne fait pas parti de l'historique de navigation même si elle peut avoir l'air d'une nouvelle page. Il y a donc une ambiguïté sur la fonction Précédente du navigateur ou de l'appareil.
Le contenu de la modale n'a pas son propre URL et ne sera pas référencé.

Déclinaisons

Bannières

Alias alerte, avertissement, bannière, banners, confirmation, callout, dialog, notification contextuelle

Éléments	Description et interactions
Couleur de fond	Selon la nature de l'avertissement : jaune, rouge, vert, gris
Texte	Environ 60 caractères, simple et clair
Action (facultatif)	Libellé, 2-3 mots maximum
Fermeture (facultatif)	Un bouton avec l'icône X

Ouvrir et fermer

À l'affichage de la modale, le focus se place sur l'action ou le bouton fermeture.
À la fermeture de la modale, le focus retourne à l'endroit du clic précédent ou au titre de la page en cours de lecture.
Le lecteur d'écran aria-live="polite" ?

Toast

Alias alerte, avertissement, dialog, notification, prompt, toaster, snackbar

Éléments	Description et interactions
Icône	Selon la nature de l'avertissement : confirmation, avertissement, erreur critique, information
Texte	Environ 60 caractères, simple et clair
Action (facultatif)	Libellé, 2-3 mots maximum. Cette action doit être disponible ailleurs dans la page.
Fermeture (facultatif)	Un bouton avec l'icône X

Ouvrir et fermer

Le toast se ferme après un certain délai. Un bon délai serait de garder le message affiché 5 secondes pour 60 caractères ou moins, plus 1 seconde en extra par tranche de 20 caractères. Le toast resterait donc minimum 5 secondes affiché.
À l'affichage du toast, le focus ne doit pas changer de position. Puisque c'est une alerte non intrusive, l'utilisateur doit pouvoir continuer à naviguer sans interruption.
À la navigation clavier, il est possible de naviguer jusqu'au toast pour le fermer, mais généralement, il va se fermer automatiquement suite à un certain délai.
À la fermeture de la modale, le focus se place au dernière endroit focusser.
Au lecteur d'écran, annoncer directement le contenu du toast.

Fenêtre modale

Alias lightbox, dialog, modal window, popup

Élément	Description et interactions
Titre de la modale (facultatif)	Environ 60 caractères, simple et clair
Contenu de la modale	Libre, sans limite caractères
Fermeture	Un bouton avec l'icône X
Fond cliquable	Un fond noir ou blanc semi-transparent qui est en fait un bouton pour fermer la modale

Navigation avec le clavier

Touches	Actions
Tab	Lorsque la popin est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la popin. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la popin au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la popin.
Maj + Tab	Même comportement qu’avec la touche, 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 popin 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 popin.
Esc	Lorsque la popin est affichée, ferme la popin et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la popin.

Références

Dernières modifications


`16/03/2022`	Cette composante a été retravaillée dans le contexte de connexion au centre des membres / Mon espace. Voir Linda Hersant ou Olivier Taillon, designer interactifs.

Annexe

Exemples d'utilisations sur les plateformes de RC