Composants
Modale
Une fenêtre modale est une zone de contenu qui s'affiche par-dessus la page web en cours. L'interaction étant alors limitée à ce seul contenu, l'objectif est de concentrer exclusivement l'attention de l'utilisateur sur une information à prendre en compte ou une tâche à accomplir.
Une fois son ouverture déclenchée au clic sur son bouton correspondant, une modale se compose de 4 éléments principaux :
- un titre ;
- une zone de contenu ;
- un bouton "fermer" ;
- un overlay, qui permet l'affichage au-dessus de la page courante.
Il est conseillé de placer toutes les modales à la fin de la balise body, juste avant les scripts.
Accessibilité
Pour fermer la modale, l'utilisateur doit avoir 3 possibilités :
- cliquer sur le bouton "fermer" ;
- cliquer à l'extérieur de la modale ;
- presser le bouton "esc".
Pour les utilisateurs au clavier, le focus ne doit jamais sortir de la modale. Lors de sa fermeture, le focus se replace sur le bouton qui avait permis son ouverture.
La balise principale de la modale, qui doit contenir le role="dialog", doit également être liée à son titre par un aria-labelledby="..." où "..." est l'id de celui-ci.
Le texte masqué du bouton de fermeture doit rappeler le titre de la modale: "Fermer : Titre de la modale".