La problématique du menu déroulant est récurrente en matière d'accessibilité. Une discussion sur le forum Accessibilité et Web Standards de Viaduc est l'occasion de revenir dessus.

Pour aller directement au but, disons le tout net: aucun menu déroulant n'est complètement accessible.

Il existe toute une palanquée de techniques pour créer des menus déroulants. Les plus conformes aux standards utilisent CSS et une bonne sémantique, délaissant ainsi javascript. Même de tels menus ne peuvent être considérés comme accessibles, i.e. passant une certification Bronze. L'explication est simple:

  • le fondement même du menu déroulant est la superposition d'un contenu sur un autre.
  • dans une page web (à opposer à une application lourde), le moyen habituel pour superposer du texte est de masquer un arrière plan par la couleur de fond du nouveau premier plan. Remarque: un autre moyen serait de positionner des calques en CSS, mais ceci est vain du point de vue de l'accessibilité (on verra dans un prochain billet pourquoi le positionnement absolu est strictement incompatible avec l'accessibilité).
  • un des points clés de l'accessibilité est de ne pas véhiculer une information uniquement par la couleur. Le test correspondant consiste donc à changer les couleurs de la page (à l'aide d'une CSS personnalisée) ou à désactiver les couleurs. Et c'est là qu'on constate systématiquement l'inaccessibilité du menu: une fois les couleurs désactivées, les textes se chevauchent et deviennent illisbles.

Voyons un exemple concret avec des copies d'écrans des différents états du menu:

1) état "au repos", les mots Innovation et Grand public sont deux en-têtes du menu déroulant:
Menu déroulant état au repos

2) état "hover", le contenu de Innovation se déroule sur le contenu placé en dessous (le vous êtes ici) :
Menu déroulant état hover

3) état "hover" avec les couleurs désactivées: on voit au travers du menu
Menu déroulant état hover et couleurs désactivées

A ce jour, je n'ai trouvé aucun menu déroulant pleinement accessible (qui passe une certification Bronze). Je suis pas loin de penser que le concept même de menu déroulant n'est pas accessible. Cependant, si vous avez des exemples de menu déroulant qui pourraient me contredire, je me ferai un plaisir de les tester :)