Menu accessible

Navigation au clavier :

1. Avec JavaScript, tabulation :
   • Tabuler pour naviguer,
   • Espace ou Entrée sur un toggle () pour ouvrir/fermer un sous-menu.
2. Avec JavaScript, flèches :
   • 1^er niveau du menu :
     • ← ou ↑ : gauche,
     • → ou ↓ : droite,
     • ↓ sur un item comportant un toggle : ouvrir le sous-menu.
   • Dans un sous-menu :
     • ↑ ou ↓ : monter et descendre dans le sous-menu,
     • ← ou → : retourner au menu/sous-menu parent.
     • ← ou → sur un item comportant un toggle : ouvrir le sous-menu.
   • Note : je trouve la navigation par flèches compliquée, mais je ne vois pas de meilleure solution pour l'instant (il faut également penser à la vue mobile où la position des éléments n'est plus la même).
3. Touche Echap pour fermer le sous-menu actif.
4. Sans JavaScript :
   • Tabuler pour naviguer,
   • Espace sur un toggle pour ouvrir/fermer un sous-menu. Les toggle sont en fait des checkboxes + label, les attributs aria-* ne sont bien sûr pas mis à jour.

Support navigateur à partir d'IE8.
Sans JavaScript, c'est la catastrophe sur IE8 : je fais de la magie, pas des miracles.

Le menu est également responsive.

Requiert Modernizr et jQuery (ainsi que Selectivizr et respond.js pour IE8).
Hélas, Selectivizr ne semble pas faire entièrement son boulot concernant l'ouverture d'un sous-menu au clavier, qui fait un peu comme bon lui semble. Quelques modifications dans mon CSS/JS arrangeraient les choses mais il faudrait utiliser des classes CSS au lieu des sélecteurs d'attribut, ce que je n'ai pas souhaité faire.