Rendre vos boîtes modales accessibles

Rendre vos boîtes modales accessibles

L'accessibilité est un domaine trop souvent oublié que ce soit dans la vraie vie comme sur le web. Pourtant, cette accessibilité peut même vous rendre service à ceux qui sont valides : en effet, l'accessibilité touche tout le monde, pas nécessairement les personnes ayant un ou des handicapes.

Dans ce tutoriel, je parle du cas particulier des boites modales qui ne sont pas accessible dans la plupart des cas. Pour s'en rendre compte il suffit de regarder tous les plugins de la toile qui permettent de faire ce genre de choses. Aussi, par boîte modale j'entends également les choses comme des galeries de photos et globalement tout ce qui se place en surimpression par devant le contenu et qui visuellement montre que ce qui est derrière cette boite est inaccessible, généralement via un aplat noir.

Tutoriel vidéo jQuery : Rendre une boite modale accessible

Le soucis se pose au niveau de la navigation au clavier. Trop souvent ces boites n'intègrent que la gestion de la touche echap pour fermer la boite ; mais celles-ci oublient (ou plutôt leurs créateurs) la navigation à la tabulation. En effet, avec l'usage de la souris un oublie vite que certains naviguent au clavier (moi le premier). Le comportement par défaut de la touche tabulation est d'aller d'élément tabulable en élément tabulable. Or, afficher un aplat ne signifie pas que les liens cachés par celui-ci ne sont pas accessible. Vous vous retrouverez donc avec la tabulation qui se balade derrière votre boite modale : illogique.

C'est là tout l'objet de ce tutoriel : faire en sorte que la tabulation se promène uniquement dans la boite modale à partir du moment où celle-ci est ouverte.

Votre gravatar