jQuery UI Dialog

Pierre Jourdain le 04/08/2014 - 3 réactions

jQuery UI permet d'utiliser facilement des fenêtres de dialogue. Ce type de fenêtre peut contenir une notification avec ou sans boutons, un formulaire complet ou tout autre contenu.

Screenshot jQuery UI Dialog

Cette boite de dialogue est injectée dans le code source de la page et se superpose au reste de la page via CSS. Dans sa configuration par défaut, la fenêtre créée avec jQuery UI pose quelques problèmes d'accessibilité. Notamment pour les utilisateurs qui naviguent au clavier ou avec un lecteurs d'écran.

  • Lors de l'ouverture de la fenêtre, celle-ci ne reçoit pas le focus.
  • En tabulant, le focus est visible dans l'arrière-plan mais ne permet pas d'atteindre les éléments de la fenêtre.
  • Les utilisateurs de lecteur d'écran utilisent normalement les flèches vers le haut ou le bas pour déplacer le focus de lecture. Ils ne pourront pas le faire dans la fenêtre et ne pourront par conséquence, pas lire le contenu de celle-ci.

Néanmoins en configurant quelques options du module jQuery UI Dialog, il peut devenir accessible pour tous les utilisateurs.

Modal

Nous mettons la valeur de 'modal' à "true" pour que les autres éléments de la page cessent d'être accessibles au clavier. Vous créez ainsi une sorte de piège au clavier qui maintiendra le focus dans la boîte de dialogue. Il n'en sortira pas.

Gestion du focus

Il est très important que le focus se déplace vers la boîte de dialogue qui s'ouvre. Un utilisateur aveugle ou ayant une déficience visuelle peut penser que le lien qu'il a activé ne fonctionne pas parce qu'il y a l'air de ne rien se passer. Un utilisateur malvoyant qui travaille avec un logiciel d'agrandissement ne voit peut-être pas la fenêtre de dialogue car elle se trouve en dehors de son champ de vision. Heureusement le déplacement du focus fait bien partiue de jQUery UI.

Il faut idéalement que ce soit le premier élément de la lightbox qui reçoive le focus. En effet, on voit souvent que le premier champ de formulaire de la lightbox reçoit le focus. Or s'il y a du texte qui précède ce champ de formulaire, celui-ci ne sera pas lu par les lecteurs d'écran.

aria-hidden

On peut utiliser des propriétés ARIA pour communiquer des informations supplémentaires aux lecteurs d'écran. Dans ce contexte il peut être utile d'utiliser l'attribut aria-hidden.

L'attribut Aria-hidden est de type booléen. Aria-hidden="true" rend l'élément invisible pour un lecteur d'écran. Aria-hidden="false" le rend visible.

Nous mettons le contenu (dans ce cas un div avec id = "wrap") à aria-hidden="true". Le contenu devient alors invisible uniquement pour les lecteurs d'écrans. Pour la fenêtre de dialogue nous utilisons aria-hidden="false" pour qu'elle seule soit visible. Il ne faut pas perdre de vue que lors de la fermeture de la fenêtre, il faudra inverser les valeurs de ces deux 'aria-hidden' pour que la fenêtre soit cachée et que le contenu redevienne visible.

Exemple de code

Consultez un exemple en ligne.

Cet exemple a été teste avec les lecteurs d'écrans suivants: VoiceOver(mac) Jaws, NVDA et SuperNova (PC/Windows). Les résultats sont bons sauf en ce qui concerne SuperNova qui ne peut gérer le déplacement du focus dynamique. Les utilisateurs de SuperNova ne pourront pas consulter le contenu de la lightbox. Le focus reste bloqué sur le lien 'ouvrir la lightbox'.

Conclusion

Moyennant quelques adaptations du code, le plugin jQuery UI Dialog devient accessible et utilisable par pratiquement tout le monde.

Commentaires

Louis a écrit il y a 3 ans

Super tutoriel

Greg a écrit il y a 3 ans

Bonjour,

J'aimerais faire la même chose mais lancer plutôt une vidéo à l'ouverture de la page (sans cliquer sur un bouton) en modal sans possibilité de la fermer avec apparition d'un bouton "Close" au bout de 5s.

Pouvez-vous m'aiguiller?

Merci

Sophie Schuermans a écrit il y a 3 ans

Bonjour Greg,

Ce n'est pas une bonne idée d'ouvrir une modale à l'ouverture de la page. Ce n'est pas prévisible et peut être déroutant. Il vaut toujours mieux laisser le contrôle à l'utilisateur.

Si vous voulez un bon exemple de fenêtre de dialogue modale, vous en trouverez dans l'article Fenêtres de dialogue modales.

Réagissez

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