Fenêtres de dialogue modales

Sophie Schuermans le 17/06/2015 - Réagissez

Pas le temps de tout lire? Utilisez le plugin jQuery Simple and Accessible Modal Window de Nicolas Hoffmann (Github).

Il existe deux types de fenêtres de dialogue: modales et non modales. Lorsqu'une fenêtre modale est ouverte on ne peut plus interagir avec le reste de la page. Il faut la fermer avant de pouvoir continuer à lire ou travailler. Nous trouvons ce type de fenêtre dans le système d'exploitation de notre ordinateur. Ce sont ces fenêtres qui nous demandent de confirmer une action. Par exemple si nous fermons un message e-mail qui n'a pas été envoyé.

dialoogvenster mail app save message as draft

Les fenêtres de dialogue non modales sont similaires, mais n'interrompent pas l'application. Vous pouvez continuer à travailler pendant que la fenêtre est ouverte. C'est le cas, par exemple, de la fenêtre de recherche dans Microsoft Word.

Sur le web, on trouve beaucoup de fenêtres de dialogue modales, par exemple pour se connecter à un service, s' inscrire à une liste de diffusion ou afficher des galeries d'images. On les appelle aussi 'lightbox' ou 'overlay'. Les fenêtres non modales existent aussi mais sont moins courantes. Nous nous concentrons ici sur le comportement attendu d'une boîte de dialogue modale accessible.

Gestion du focus

  1. un bouton ou un lien ouvre la fenêtre
  2. le focus est déplacé vers la fenêtre modale
  3. après la fermeture de la modale, le focus revient au bouton d'ouverture

L'ouverture d'une fenêtre de dialogue est une action. Il est en général préférable d'utiliser un <button> pour déclencher son ouverture et non un <a href="">, car l'action ne provoque pas la navigation vers une nouvelle page.

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.

Faites donc se déplacer le focus vers l'élément ( <div> ) englobant la fenêtre modale, ou éventuellement vers le premier élément de formulaire de la modale. La première option est préférable pour les personnes aveugles car on ne saute aucune information. La deuxième option est plus commode pour les utilisateurs qui naviguent au clavier car le focus se trouve directement sur le premier élément qui nécessite une action.

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.

Lors de la fermeture de la boîte de dialogue, le focus retourne sur l'élément (bouton) qui a ouvert la fenêtre modale. Dans le cas contraire un utilisateur de lecteur d'écran sera désorienté.

Attention, le lecteur d'écran Supernova de Dolphin qui est très populaire auprès des personnes ayant un handicap visuel en Belgique ne gère pas le déplacement du focus. Nous avons informé les développeurs, mais à notre grand étonnement ils ne voient pas cela comme un problème. Vous trouverez plus d'informations sur notre billet de blog consacré à Supernova et à la gestion du focus.

Piège au clavier

Il est non seulement important que le focus se déplace jusqu'à la boîte de dialogue, mais il ne doit pas en sortir. Une boîte de dialogue modale doit être refermée avant de pouvoir à nouveau interagir avec le reste de la page. Dans la majorité des implémentations, le piège au clavier n'est pas présent. Il est possible de sortir de la fenêtre de dialogue en utilisant le TAB ainsi que le curseur du lecteur d'écran. Comment faire pour éviter cela?

Pour qu'un utilisateur de lecteur d'écran soit confiné à la boite de dialogue lorsque celle-ci est ouverte, on cache tout le reste du contenu de la page avec aria-hidden. Placez un attribut aria-hidden sur tous les blocs (header, main, footer) qui sont au même niveau que la boîte de dialogue. Ne les placez pas sur un élément parent, tel que <body>. Basculez 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. Les lecteurs d'écran ignorent les éléments avec aria-hidden = "true".

L'utilisation de l'attribut aria-hidden n'a d'influence que sur ce qui est vu par un lecteur d'écran et n'influence pas l'ordre de tabulation. 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.

Assurez-vous en outre de donner la possibilité à l'utilisateur de fermer la fenêtre avec la touche ESC.

Indication visuelle de focus.

En plus de bloquer le focus à l'intérieur de la modale, n'oubliez pas de rendre ce focus bien visible. Si ce n'est pas le cas, un utilisateur qui navigue au clavier ne pourra savoir sur quel élément il se trouve. Les navigateurs affichent un focus par défaut. Firefox (Gecko) et Internet Explorer (Trident) affichent un bord pointillé tandis que Chrome et Safari (Webkit) affichent un ligne continue. Il est préférable de renforcer le focus pour le rendre clairement visible. En tous cas, ne le supprimez pas. Attention, certaines feuilles de styles de "Reset" CSS peuvent annuler le focus.

De boutons qui ont du sens

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 significatif. Donnez la valeur "Fermer" (<button>Fermer</button>) au bouton et utilisez une image d'arrière-plan (background-image) d'un "x". Ou bien choisissez une police d'icône avec texte caché.

ARIA

Pas encore entendu parle d'ARIA? Voici une introduction.

L'élément <dialog> introduit par HTML5 n'est pas encore supporté pas les navigateurs et lecteurs d'écran. ARIA permet de compléter l'information qui sera transmise au lecteur d'écran. En utilisant <div role="dialog">, le div est annoncé comme une fenêtre de dialogue modale.

La fenêtre modale est maintenant bien reconnue, mais n'a pas encore de nom. Avec l'attribut aria-labelledby le titre <h1> de la modale est relié à l'élément <div> parent.

Certains lecteurs d'écran ne lisent que les éléments de formulaire à l'intérieur de la modale car role="dialog" les fait basculer en mode formulaire. Théoriquement c'est correct car une modale ne sert en principe pas à présenter des informations détaillées. Mais c'est un problème si la fenêtre modale contient également du texte. La solution est d'ajouter un <div role="document"> à l'intérieur du div principal. role="document" fait passer le lecteur d'écran du mode formulaire au mode navigation. Cela permet aux lecteurs d'écran de lire la totalité du contenu.

Résumé

  • Le focus se déplace vers la fenêtre modale (div extérieur) quand elle s'ouvre
  • Le focus est visible
  • Le focus est prisonnier de la fenêtre modale
  • Quand on ferme la modale, le focus retourne à l'élément qui a déclenché son ouverture
  • Les boutons sont bien nommés
  • Il est possible de fermer la fenêtre modale avec ESC
  • Utilisez role="dialog" pour le div qui contient la modale
  • Utilisez role="document" pour le contenu
  • Utilisez aria-hidden="true" pour cacher le reste de la page aux lecteurs d'écran.

Exemple

Le plugin créé par Nicolas Hoffmann respecte tous les points ci-dessus : jQuery Simple and Accessible Modal Window by Nicolas Hoffmann (Github)

fenêtre modale

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>