Bricolage pour un menu déroulant plus accessible ?

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

De temps en temps quand je regarde mon tuto sur le menu déroulant je me demande comment rendre ce menu davantage accessible. Le top serait de pouvoir le parcourir au clavier sans javascript et que ça soit pas trop dégueulasse avec les CSS désactivées. Je me suis un peu pris la tête hier soir pour essayer de trouver une solution CSS à ce problème. En bricolant un peu la structure et en jouant avec les sélecteurs d'enfants adjacents j'ai réussi à pondre un truc à peu près potable mais qui ne fonctionne que sous Firefox à priori.

Bien sûr on a rien sans rien et ce début de solution nécessite un compromis au niveau de la sémantique. Il y a un peu de js aussi mais c'est juste pour que ça marche à la souris sous IE.

Maintenant je suis bloqué, si vous avez d'autres idées ou une meilleure façon de faire ça je suis preneur. Si vous pensez pouvoir améliorer le code ou le faire fonctionner dans un autre navigateur via CSS seulement, allez-y.

Vous pouvez regarder ce que ça donne sous Firefox ou voir directement la feuille de style. Ce n'est pas parfait mais on a accès via le clavier (sous Firefox) à tous les items des menus. Pour l'instant je n'ai jamais vu sur le web un menu déroulant CSS dont on pouvait parcourir le contenu au clavier sans javascript et je ne pense pas que ça soit possible en CSS2, mais qui sait ?

On pourrait débattre sur le rôle de CSS sur la couche de comportement du navigateur ou sur l'impact ergonomique d'un menu déroulant mais franchement j'ai pas le temps ;-)

#1 David

02/02/2006 22:36

Ca marche bien aussi sous safari pour information.

#2 Lucas Solaris

13/02/2006 14:55

hello:) en visite pour la enieme fois sur ton site dont je tiens a vanter la sobriété esthetique et le contenu toujours interessant , je voulais te dire que je,me suis permis de pomper "Bricolage pour un menu déroulant plus accessible " afin d'essayer de l'integrer a qq pages perso sans pretention . A ce stade rien n'est publié et je ne le ferai pas sans : te citer (lien) ou attendre ton aval voila , bonne continuation ,,bon anniversaire (!!) et @+

#3 Sam

02/03/2006 12:59

Salut,

J'ai suivi les insctructions qui se trouvent ici http://marcarea.com/tuto/menu01.php#nav pour créer un menu déroulant mais la dernière insctruction ne marche pas : #menuDeroulant li:hover > .sousMenu { display: block; } Pouvez-vous m'aider svp? Merci

#4 Marco

02/03/2006 20:45

Sam, envoie un email avec un lien vers un exemple de ton code qui ne marche pas, je vais essayer de voir ce que je peux faire.

Avant Filtrage social des news Après Aide à la recherche avec XMLHttpRequest fin

Tag Kemar Joint