NV.019 - Utilisation de modale -
Niveau 3
Les fenetres modales (et non des pop up) sont utilisées de manière appropriées:
- apparence et intérêt
- titre
-navigation clavier
-role aria.
Apparence: une modale est une boite affichée en superposition de la page consultée en conservant le contexte. (par opposition aux pop up qui s'ouvrent dans une nouvelle fenetre ou onglet)
Si le processus utilisateur doit être interrompu, le background est inaccessible.
interet: La modale est nécessaire à la réalisation d'une tâche demandée par l'utilisateur dans son contexte (affichage d'une définition ou d'une aide, saisie de données spécifiques).
Le titre est visible et lié à un aria-label ou un aria-labelledby.
navigation clavier: Elle recoit le focus lors de son apparition et est manipulable au clavier.
Le role dialog est utilisé.
<code><div role="dialog" aria-labelledby="modal-title">
<h1 id="modal-title">[Titre de la fenetre modale]</h1>
[Contenu texte de la modale]
<button>Fermer</button>
</div> </code> https://www.w3.org/TR/wai-aria-practices/#dialog_modal, https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
-
Etape(s):
-
Types d'exigence:
-
WCAG 2.1: