Accessibilité des fenêtres modales

Bonjour,

Je suis à la recherche d'informations concernant l’accessibilité des fenêtres modales du type Bootstrap (http://getbootstrap.com/javascript/#modals) ou autre.

Je suis preneur de réponses :
- les fenêtres modales utilisant, ou non, du js sont-elles accessibles ? Pourquoi ?
- les fenêtres modales sont-elles autorisées en fonction de certains niveaux d'accessibilité ?

Merci d'avance pour vos retours.

Bonjour,

Tes questions sont un peu biaisées :les modales en js sont accessibles si l’accessibilité est prise en compte dans leur conception (= ça dépend), et si tel est le cas elles sont autorisées, évidemment.

Voici quelques ressources pour t´en dire plus :
La modale jQuery UI est accessible
Paypal a étendu Bootstrap pour être accessible
Des chercheurs trouvent et documentent
OpenAjaxAlliance aussi, tiens

Rien n‘est jamais parfait (notamment en terme de compatibilité), mais ça existe.

Bon courage !

Bonsoir,

On trouve de tout en ce qui concerne les fausses popup qui ont le look de boîtes de dialogue et qui sont plus ou moins modales. J'en ai déjà vu des très accessibles, comme des totalement catastrophiques.

Je ne connais pas spécialement tel ou tel framework ni telle ou telle bibliothèque, je n'ai donc pas de nom à te conseiller ou te déconseiller, mais voici des problèmes que je rencontre régulièrement sur les sites courants :

1 - La manie de mettre ces boîtes soit tout au début soit tout à la fin du DOM, au lieu de les mettre en contexte au bon endroit, et ne pas placer le focus sur le premier élément de la dite boîte (typiquement le bouton OK ou oui/non). Dans ce cas, on peut ne pas se rendre compte que quelque chose est apparu, ou ne pas le trouver même quand on le sait.
2 - Pas de moyen de fermeture rapidement identifiable, ou moyen de fermeture inaccessible: ça c'est très courant ! Il faut absolument s'assurer que le bouton de fermeture soit accessible, focusable, et bien compréhensible comme tel. Sinon il n'y a plus qu'à prendre la poudre d'escampette.
3 - Modale pour la souris, mais pas pour le clavier: il arrive souvent qu'on puisse sortir de la boîte alors qu'on n'est pas censé pouvoir en jouant de la touche tab. Le gros problème c'est qu'il n'existe pas de moyen très efficace et fiable de rendre une boîte complètement modale au clavier. Le seul moyen consiste à attribuer temporairement tabindex=-1 à tous les éléments habituellement focusables qui sont hors de la boîte, et les restaurer à tabindex=0 à la fermeture. Les oublis sont vites arrivés et ça peut être très gênant, surtout les oublis à la restauration; dans ce cas un lien ou un champ de formulaire qui fonctionnait très bien avant l'ouverture de la popup n'est plus atteignable après qu'elle ait été fermée, et aucun moyen d'y remédier. Attention par contre, ne jamais jamais au grand JAMAIS attribuer une valeur autre que -1 ou 0 à tabindex, ça conduit à des incohérences catastrophiques.
4 - Modale au clavier et à la souris, mais pas au tampon virtuel des lecteurs d'écran: je n'ai que très rarement vu des sites qui faisaient les choses correctement dans ce domaine et je ne sais pas si on peut vraiment. Mais avec un lecteur d'écran tel que jaws ou NVDA, même quand une boîte modale apparaît, on peut passer dans le contenu en-dehors très facilement en utilisant nos mécanismes de navigation habituels. Avec la mauvaise pratique #1 ça peut faire un cocktail détonnant: je suis sur ta page, je sais pas qu'une boîte modale est apparue, je vois tout le reste du site, mais quand je clique sur un lien ça ne marche pas (normal il y a un voile assombrissant qui remplit tout l'écran et que je ne vois pas). Dans ces conditions, je m'excite deux minutes et après c'est à coup sûr adieu ton site. A essayer: aria-hidden sur l'ensemble du contenu à masquer, et boîte en-dehors de cette zone. J'avoue quand même que j'ai déjà utilisé la technique pour contourner des choses sur certains sites récalcitrants mal programmés...

A noter quand même que je n'aime pas trop le terme de fenêtre modale pour ce que ça représente habituellement sur le web. Les vraies fenêtres modales désignent normalement des boîtes de dialogue dans des fenêtres totalement indépendantes de la fenêtres principale. Sur le web ça peut se faire avec showModalDialog, mais ça s'utilise rarement voire même carrément jamais. Je me demande bien pourquoi d'ailleurs, c'est plus du tout spécifique à IE maintenant (ça l'était avant); un jour il faudra qu'on m'explique ce que les gens ont contre showModalDialog et pourquoi ils préfèrent leurs vilaines popup. SMD a l'immense avantage d'être complètement modal 100% garanti sans faille possible, et je suis sûr que ça conviendrait très bien dans pas mal de cas.

EDIT1: ah non, je retire ce que j'ai dit, en fait, SMD ne marche pas sur iPhone; dommage, c'est à ça que devraient ressembler les boîtes de dialogue sur le web, ça ne devrait pas être des boîtes virtuelles à base de div à la con. Zut !

EDIT2: j'ai trouvé autre chose, il semblerait qu'un hypothétique élément <dialog> soit en projet, il permettrait très facilement qu'une partie définie de la page devienne momentanément modale. Quelqu'un a des infos là-dessus ? J'aime bien cette idée, ça me paraît être un très bon compromis entre SMD et des pseudo boîtes buggées à base de div, et ça permettrait d'avoir quelques comportements standard fort utiles, p.ex. entrée quand le focus est sur autre chose qu'un bouton ou un lien = clic sur le bouton par défaut; touche échap ou le geste en Z sur iPhone = clic sur le bouton de fermeture; une façon universelle et non modifiable par le graphiste d'indiquer qu'une zone n'est temporairement pas réactive à cause de la boîte; etc.
Modifié par QuentinC (28 Apr 2014 - 23:08)

Bonjour,

Merci pour vos réponses et toutes vos infos !

Je vais pouvoir essayer d'intégrer des fenêtres modales en respectant vos conseils pour les rendre accessibles.
QuentinC en faite la principale difficulté que je constate c'est de ne pas rendre possible la navigation clavier en dehors de la modale une fois qu'elle est ouverte.

Merci encore d'avoir prit le temps de répondre.