Après la théorie, on met les mains dans le code.

Ce que j’ai fait :

• lire la notice Boîtes de dialogue modales(lien externe) d’AcceDe Web

• lire l’article Using JavaScript to trap focus in an element(lien externe) de Hidde de Vries

• étudier le code de la modale accessible(lien externe) d’Udacity

• créer un Codepen(lien externe) de démonstration d’une modale accessible : j’ai réalisé ce code moi-même, à l’exception de la gestion du focus qui provient de la modale d’Udacity

• naviguer au clavier sur la modale et vérifier que les interactions requises fonctionnent correctement

Ce que j’ai appris

Limiter le focus à l’intérieur de la modale

Pour empêcher l’internaute de cliquer en dehors de la modale, le principe est de “bloquer” le focus entre le premier et le dernier élément focusable de la modale.

On fait la liste de tous les éléments à l’intérieur de la modale susceptibles de recevoir le focus et on détermine le premier et le dernier élément focusable : ils constitueront les limites de la zone de focus tant que la modale est ouverte. Lorsque l’internaute atteint le dernier élément et appuie sur “Tab”, c’est le premier élément focusable de la modale qui est ensuite atteint, et non pas un élément focusable en dehors de la modale.

Il est aussi possible de bloquer le focus en appliquant un tabindex="-1" à tous les éléments en dehors de la modale.

Keycodes JavaScript

Chaque touche du clavier possède un “keycode” en Javascript, c’est-à-dire un nombre représentant la valeur de caractère de la touche, qui permet ensuite de cibler la touche en question directement dans le code.

Pour cette modale, l’interaction au clavier fait intervenir les touches “Tab” et “Escape”, dont les keycodes respectifs sont “9” et “27”.

Le site Keycode Infos (lien externe) de Wes Bos permet de tester et récupérer directement le keycode des différentes touches du clavier.

A faire

• prévoir une version mobile de la modale

• tester la modale dans différents navigateurs (testée uniquement dans Firefox à l’heure actuelle)

• tester la modale avec un lecteur d’écran (ce sera sûrement avec Talk Back ou Voice Over sur mobile étant donné qu’Orca refait des siennes sur mon ordinateur portable)