AnySurfer - Accueil
vous êtes ici
  1. Accueil
  2. Documentation
  3. Composants
  4. Fenêtre de dialogue modale

Fenêtre de dialogue modale

Dernière mise à jour le

Les fenêtres de dialogue modales, aussi appelées overlays, sont des composants qui se superposent au contenu de la fenêtre active. Lorsqu'une fenêtre de dialogue modale est ouverte on ne peut plus interagir avec le reste de la page et le contenu en dehors de la fenêtre modale est visuellement obscurci. C'est ce qui les différencie des fenêtres non modales.

Les fenêtres de dialogue modales peuvent contenir des contenus très variés : une simple notification, un album photo ou un formulaire d'inscription, pour ne citer que quelques exemples.

Nous nous concentrons ici sur le comportement attendu d'une fenêtre de dialogue modale accessible, tel que décrit dans le motif de conception pour une fenêtre de dialogue modale (ARIA practices 1.1).

Gestion du focus à l'ouverture

Lors de l'ouverture, le focus se déplace vers la fenêtre modale. Sans ce déplacement de focus, un utilisateur de lecteur d'écran n'est pas informé que quelque chose s'est produit. Il pense que le bouton ne fonctionne pas. Un utilisateur qui navigue au clavier devra tabuler et passer par tous les éléments de la page avant d'atteindre la fenêtre modale car celle-ci se trouve généralement à la fin du code source.

Déplacez le focus vers l'élément ( <div> ) englobant la fenêtre modale. Le déplacement du focus peut se faire via la méthode JQuery .focus(). Le <div> de la modale où devrait se déplacer le focus ne peut normalement pas recevoir le focus. Cela peut être résolu en ajoutant l'attribut tabindex="-1". Tabindex="-1" ne place pas le <div> dans l'ordre de tabulation, mais permet qu'il puisse recevoir le focus via javascript.

Piège au clavier

En règle générale on évite les pièges au clavier, mais dans le cas d'une fenêtre modale, le focus ne doit pas sortir de la fenêtre modale tant qu'elle est affichée, puisque les utilisateurs ne sont pas censés pouvoir interagir avec le reste de la page. Le piège au clavier est donc nécessaire.

Il y a deux manières de naviguer au clavier: la tabulation et, uniquement pour les utilisateurs de lecteur d'écran, l'utilisation de la flèche vers le bas.

  • Il faut utiliser du Javascript pour créer une boucle de tabulation à l'intérieur de la fenêtre de dialogue. Exemple: keep-focus sur Github.
  • Pour qu'un utilisateur de lecteur d'écran soit confiné à la boite de dialogue lorsque celle-ci est ouverte, il faut utiliser l'attribut aria-modal="true" sur l'élément qui contient la modale.

Note : Avant qu'il y ait du support pour aria-modal, une autre technique était utilisée pour confiner la navigation avec un lecteur d'écran à l'intérieur de la fenêtre modale. La technique consistait à placer un attribut aria-hidden sur tous les contenus (header, main, footer) qui sont au même niveau que la boîte de dialogue. Les lecteurs d'écran ignorent les éléments avec aria-hidden = "true" car ces contenus ne se trouvent pas dans l'accessibility tree.

C'est une technique valide mais plus dangereuse car si on place l'attribut sur un élément parent, tel que <body>, c'est toute la page qui devient invisible. Il faut basculer cet attribut via JavaScript de aria-hidden="false" à aria-hidden="true" à l'ouverture de la fenêtre de dialogue. Pour le <div> de la fenêtre de dialogue faites l'inverse.

Fermeture de la fenêtre modale

  • Donnez la possibilité à l'utilisateur de fermer la fenêtre avec la touche ESC.
  • Si vous prévoyez un bouton de fermeture, veillez à ce qu'il soit accessible au clavier et qu'il ait un nom accessible.
  • Lors de la fermeture de la fenêtre de dialogue, le focus retourne sur l'élément (bouton) qui a ouvert la fenêtre modale.

Attributs ARIA nécessaires

Si vous n'êtes pas encore familier avec ARIA, lisez notre introduction à ARIA.

  • Ajoutez role="dialog" sur l'élément qui contient la modale.

    L'élément <dialog> n'est pas encore supporté par les navigateurs et lecteurs d'écran. En utilisant <div role="dialog">, le div est vu comme une fenêtre de dialogue modale par les technologies d'assistance.

  • Utilisez aria-label ou aria-labelledby pour donner un nom à la modale.

    S'il y a un titre visible dans la fenêtre modale, utilisez aria-labelledby pour faire référence à ce titre.

  • Utilisez aria-modal="true" sur l'élément contenant la modale pour rendre inaccessible tout le contenu en dehors de la fenêtre modale, pendant que celle-ci est ouverte.

Autres points d'attention

Les points ci-dessus sont spécifiques au motif de conception des fenêtres de dialogue modales. Mais il ne faut pas oublier les autres bonnes pratiques d'accessibilité.

Le focus doit être bien visible lors de la tabulation. Si ce n'est pas le cas, un utilisateur qui navigue au clavier ne pourra savoir sur quel élément il se trouve.

Les boîtes de dialogue ont souvent un bouton de fermeture en forme "x" comme les boutons de fermeture des fenêtres du système d'exploitation. Faites en sorte que ce bouton se trouve dans l'ordre de tabulation et soit compréhensible pour un utilisateur de lecteur d'écran.

«x» n'est pas un nom significatif. Donnez un nom significatif au bouton, par exemple 'Fermer' (<button>Fermer</button>).

Il existe de nombreuses techniques pour arriver à ce résultat, par exemple:

  • Utilisez simplement le texte 'Fermer' plutôt qu'un 'x'.
  • Ajouter un aria-label="fermer" sur le bouton
  • Utiliser une image avec alt="fermer"
  • Utiliser une image d'arrière-plan, accompagnée d'un texte caché dans le bouton
  • Mettre la lettre 'X' dans un span avec aria-hidden="true" et ajouter un span avec un texte caché dans le bouton

Exemples

Voici des exemples d'implémentations. N'hésitez pas à nous envoyer d'autres exemples à ajouter à la liste :

Commentaires

Soyez le premier à commenter