jQuery UI Dialog

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.

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'.

<a href="#" id="opener">Ouvrir la ligthbox.</a>
<div id="dialog">
<!-- L'attribut autofocus indique à jQuery de déplacer le focus sur cet élément. 
La valeur -1 de l'attribut tabindex, rend cet élément focusable par programmation. -->
<h1 autofocus tabindex="-1" >Titre de la fenêtre de dialogue</h1>
<p>Contenu de la fenêtre de dialogue.</p>
</div>

$("#dialog").dialog( {
  // la fenêtre se s'affiche pas au chargement de la page.
  autoOpen : false,
  // elle ne peut être déplacée
  draggable: false,
  // nous prévoyons un bouton pour fermer cette fenêtre.
  buttons: {
    Close: function() {
      $( this ).dialog( "close" );
    }
  },
  open: function() {
    // nous ne voulons pas de barre de titre avec le bouton de fermeture.
    $(".ui-dialog-titlebar").hide();
    // le contenu sera caché aux lecteurs d'écran
    $("#wrap").attr("aria-hidden", "true");
    // la fenêtre de dialogue sera visible pour les lecteurs d'écran
    $(".ui-dialog").attr("aria-hidden", "false");
  },
  close: function() {
    // à la fermeture de la fenêtre, le contenu doit redevenir visible
    $("#wrap").attr("aria-hidden", "false");
    // et la fenêtre devient invisible
    $(".ui-dialog").attr("aria-hidden", "true");
  },
  // l'option modal:true fait que le focus reste sur la fenêtre
  // et ne sort pas de celle-ci.
  modal: true
});
// Lorsque le lien (avec id="opener") est cliqué, la fenêtre s'ouvre.
$("#opener").click(function(e) {
  // Annule le comportement par défaut du lien (scroll vers le haut de la page) 
  // lorsqu'on clique le lien.
  e.preventDefault();
  $("#dialog").dialog("open");
});

Conclusion

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