search

nico3333fr / jquery-accessible-modal-window-aria

jQuery simple and accessible modal window, using ARIA
MIT License
60 stars 20 forks source link

Comportement étrange #7

Closed Aymkdn closed 9 years ago

Aymkdn commented 9 years ago

Salut Nico,

Merci pour tous tes scripts accessibles :-)

J'essaie d'avoir une fenêtre modal qui soit accessible sur un site Web, en utilisant ton script, cependant le résultat n'est pas similaire à ce que tu as sur ton exemple.

Le site Web est http://www.montpelliergay.com/conferences-register/ (si ton navigateur est configuré en anglais par défaut, assure toi de cliquer sur "French" en haut car je ne l'ai mis en place que sur la version française pour le moment), et la fenêtre modal apparait quand on clique sur les blocs "Gets Better" et "Solidarity".

J'effectue mes tests avec VoiceOver sur un iPad (Safari et Chrome) : lorsque j'ai le focus sur "Gets Better" avec VoiceOver je double tap et ça m'ouvre la modal, par contre VoiceOver me relie le texte où il avait déjà le focus, au lieu de sauter dans la fenêtre modal... et là on est plus ou moins bloqué puisque le focus se trouve encore sur "Gets Better", et ce, jusqu'à ce qu'on clique sur la fenêtre modal (donc pas très pratique pour un non-voyant j'imagine). J'ai essayé de retarder le focus en utilisant un setTimeout, mais sans effet. J'ai tenté de jouer avec des "tabindex" mais sans effet non plus.

Je n'arrive pas à trouver pourquoi le focus ne se fait pas correctement sur la modal qui s'ouvre. Si tu as une idée de ce que j'ai pu mal faire ?

Merci

nico3333fr commented 9 years ago

Hello Aymeric,

tu n'as pas forcément mal fait, mais parfois Voice Over fait juste ch… . (voilà c'est dit)

si tu mets un 

setTimeout(function(){ $('#js-modal-close').focus(); }, 0);

à la place de 

$('#js-modal-close').focus();

ça ne marche pas ?

La seule différence que je vois entre ton code et celui en exemple, c'est que j'ai utilisé un button et toi un lien vers une ancre ? (si tu enlève le href du lien, ça marche ? Avec un button ?)

Aymkdn commented 9 years ago

Alors j'ai essayé le timeout en question (avec des valeurs différentes), mais sans effet.

J'ai fait quelques tests avec un button au lieu de a mais dans ce cas VoiceOver ne lit plus correctement le contenu de mon bloc (je pense qu'il a du mal avec du HTML dans des tags <button>), et de mémoire le problème était toujours le même. Si j'enlève le href du lien ce n'est plus cliquable sur Safari ou Chrome de mon iPad.

Donc c'est possible que le problème vienne de VoiceOver, mais je pense qu'il est l'un des lecteurs d'écran le plus utilisé, et il est le plus facile à utiliser pour un néophyte comme moi ^^

Pas d'autre idée du coup ? :-(

nico3333fr commented 9 years ago

J'appelle des experts à la rescousse en attendant de trouver une idée ^^ ;)

nico3333fr commented 9 years ago

Suggestion de Johan Ramon : éviter les div dans le a (mettre des span en display block) ? (sait-on jamais, avec VO on peut s'attendre à tout)

Aymkdn commented 9 years ago

Yes ! Alors, ça fonctionne quand je mets des span, par contre ça ne lit plus correctement mon contenu (il va tout lire d'une traite).

Du coup ça m'a donné l'idée de modifier mon code en mettant des a à la place des div donc toute la zone est couverte et il lit correctement chaque blo :-)

Merci !

nico3333fr commented 9 years ago

Cool, je suis content que ça marche.

Autre solution : tu mets des aria-hidden sur les éléments qui ne sont pas utiles au lien pour ne garder que le texte "utile" du lien. Ou sinon, utiliser un pseudo-élément sur un lien pour qu'il prenne tout le bloc, Johan Ramon avait fait une présentation là-dessus : http://www.johanramon.fr/accessibiliser-subtilite/ (slide 14)

Au plaisir !

Si jamais, je pourrais à l'occase mentionner sur le site du plugin que ton site l'a utilisé ?

Aymkdn commented 9 years ago

Merci pour les infos complémentaires !

Pour la mention, je ne sais pas combien de temps je vais conserver cette solution, d'autant qu'à la base je voulais utiliser picoModal car pas besoin de jQuery et compatible IE8, mais il n'est pas accessible. Donc j'ai commencé à chercher comment le modifier pour le rendre accessible, mais j'avais les mêmes problèmes... Après 5 heures dessus j'ai décidé d'essayer ton plugin :-) Donc dans l'absolu je veux réussir à modifier picoModal pour qu'il devienne accessible et ainsi pouvoir l'utiliser.

Bref, tu peux mentionner le site, même si au moment où quelqu'un s'y intéressera le plugin n'y sera peut-être plus utilisé ;-)