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.
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Pour accéder à la dernière version de cette article, voir sur le portail de l'accessibilité : Meilleures pratiques en matière d'accessibilité pour les fenêtres contextuelles |
Références
Modal & Nonmodal Dialogs: When (& When Not) to Use Them (NNG, 2017)
Modality Is the One UX Concept That Most Designers Don’t Fully Understand (UX Planet, 2018)
https://developer.microsoft.com/en-us/fluentui#/controls/web/panel
https://www.audi.com/ci/en/guides/user-interface/components/notifications.html
https://protocol.mozilla.org/patterns/molecules/sticky-promo.html
https://uxdesign.cc/a-taxonomy-for-alerts-and-notifications-3bffb051b5d5 (2023)
Vitesse de lecture : https://extranet.inlb.qc.ca/recherche-et-innovation/orvis/irest-fiche-orvis/#:~:text=Pour%20une%20population%20sans%20DV,26%20mots%2Fminute%20en%20fran%C3%A7ais.
Dernières modifications
...
...
Annexe
Exemples d'utilisations sur les plateformes de RC
...