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.

a écrit :
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.

Comme je l'ai dit, c'est tout sauf facile et intuitif pour le faire: il faut attribuer tabindex=-1 à tous les éléments focusables qui sont hors de la boîte au moment où tu l'ouvres, et ne pas oublier de tous les remettre à 0 quand tu la fermes.

Les liens, les boutons et les champs de formulaire sont habituellement focusables, mais il y a tous les contrôles personnalisés à base de div/span & co qui devraient aussi l'être; et tous ne sont pas forcément focusables tout le temps, par exemple si on veut implémenter un bon menu déroulant dans les règles de l'art, seul l'item courant doit être focusable et les autres doivent le devenir quand l'utilisateur demande de changer la sélection, peu importe le type d'élément utilisé pour construire le menu au départ. ce qui fait que pour ton problème :
* Tous les éléments qui ont été mis à tabindex=-1 à l'ouverture du popup ne doit pas forcément tous être remis à tabindex=0 à la fermeture, si tu utilises des gadgets ARIA et que tu ne veux pas tout casser
* Un seul oubli de remettre un tabindex=0 à la fermeture peut avoir des conséquences désastreuses (cf. mon précédent post)
* Les éléments qui sont par défaut focusables n'ont pas de tabindex=0, et ça peut donc ne pas être si facile que ça pour bien les identifier
* Un seul oubli de mettre tabindex=-1 à l'ouverture a aussi des conséquences embêtantes

En gros, donc, c'est extrêmement facile de faire foirer tout le truc avec un seul petit oubli, et très difficile de faire en sorte que ça marche vraiment bien. C'est inutilement compliqué, alors forcément, au final, personne ne veut s'amuser. Encore un truc qui est tel une cuillère pour vider sa baignoire...

L'avantage qu'avait showModalDialog, c'est que c'était modal 100% garanti, sans prise de tête, et un appel bloquant au niveau du code qui devait être très pratique. Mais bon, paix à cette techno, elle n'est pas honnêtement appliquabl aujourd'hui. Espérons que ce <dialog> soit sérieux lui, ça faciliterait bien la tâche.
Modifié par QuentinC (29 Apr 2014 - 15:39)