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 ;-)
Ca marche bien aussi sous safari pour information.