Menu déroulant accessible en navigation clavier

Bonjour,

Je suis en train de faire un menu déroulant horizontal (2 niveaux, affichage du sous-menu au :hover) accessible en navigation clavier grâce à jquery. Je bute sur mon script, pouvez-vous m'aider ?

Je recherche le script le plus simple possible.

Je sais que certains plugins existent (superfish) mais j'ai pas besoin de tout ce qu'il propose. Donc je ne veux pas le charger juste pour ça.

Si quelqu'un l'a déjà fait, merci par avance !

Salut,
Alors déjà, oublie CSS et fais une et une seule version js (souris et clavier), ensuite la navigation "clavier" se fera par onfocus, le onfocus se fera uniquement sur des éléments "focusable", dans ton cas le <a>

Donc sur l'évènement onfocus de ton <a> tu appelleras l'évènement onmouseover de ton <li>.

Voila une piste pour commencer et n'oublie de gérer les onblur

Merci !

Oui mais si le js est désactivé, le menu déroulant marche quand même (à la souris). Pourquoi tout faire en jquery ?

C'est le côté déroulant où j'ai du mal, pour qu'il soit ouvert lors du focus des liens de 2ème niveau puis qu'il se ferme lorsque l'on passe à un autre onglet.

Bonjour,

Il ne faut pas confondre JQuery (qui n'est qu'un librairie) et JavaScript.

Oui, JavaScript peut être désactivé, mais le nombre de navigateur ayant JS désactivé est inférieur au nombre d'IE6 en circulation, donc ta solution à base de CSS est plus problématique qu'une solution à base de JS puisqu'elle exclu plus de personne (même si l'intéropérabilité n'est pas pour tout le monde une question d'accessibilité).

L'avantage de JS est que s'il est désactivé, il est possible d'accéder au menu tout de même. Pour cela il faut juste prendre soin de masqué les éléments du menu qui doivent l'être grâce à JS et non en CSS. Tu peu te renseigner sur le "JavaScript non intrusif" si tu souhaites avoir plus d'information.
Modifié par Laurie-Anne (03 Jun 2010 - 12:23)

Effectivement beaucoup de monde pense que javascript est "l'ennemi" de l'accessibilité alors que c'est tout le contraire ^^

D'accord j'ai compris, merci beaucoup !

Par contre pour le script, je bute toujours.

Tu as essayé le plugin superfish pour jquery?

Oui mais je voulais me limiter à un petit script car je n'ai pas besoin des options de ce plugin.

Quelqu'un peut me lancer sur la voie ?

Merci

Laurie-Anne a écrit :
donc ta solution à base de CSS est plus problématique qu'une solution à base de JS puisqu'elle exclu plus de personne

Pas forcément. On peut s'assurer que les liens de premier niveau mènent vers des index de rubrique ou la première page de la rubrique (pourvu qu'il y ait un menu secondaire affiché dans les pages).

Faire un menu déroulant (au survol et focus) autrement qu'avec des liens de premier niveau actifs, c'est suicidaire pour une utilisation sur un périphérique tactile (genre smartphone ou tablette tactile, avec zéro souris et zéro clavier).

Laurie-Anne a écrit :
L'avantage de JS est que s'il est désactivé, il est possible d'accéder au menu tout de même.[/url]
Quand tu as sept rubriques avec 10 pages chacune, ça fait 70 liens à afficher dans la page en mode «JS désactivé». Bonjour l'angoisse. Et ça ne règle pas le problème des périphériques tactiles, notamment.

Cela dit, il n'est pas obligatoire d'avoir comme base de travail des sous-menus dans le HTML et un affichage des sous-menus au :hover (CSS). Il y a d'autres pistes à explorer, par exemple le fait de générer les sous-menus en JavaScript. Et sans doute d'autres possibilités.

[quote=Raphael Lardy]Oui mais je voulais me limiter à un petit script car je n'ai pas besoin des options de ce plugin.

Ce que tu peux faire, c'est regarder la source de Superfish et d'autres scripts qui gèrent la navigation au clavier, et voir comment ils font. Ça correspond à ce qu'écrivais spiral123:

spiral123 a écrit :
ensuite la navigation "clavier" se fera par onfocus, le onfocus se fera uniquement sur des éléments "focusable", dans ton cas le <a>

Modifié par Florent V. (08 Jun 2010 - 13:27)