Conseils pour un menu dynamique accessible

[Mathieu]

Bonjour

Pour mon site, j'ai opté pour un menu dynamique à base de Javascript. Comme beaucoup, je préfère éviter l'utilisation de ce dernier, mais mon choix s'est porté sur cette solution pour deux raisons :

- le besoin de placer énormément de liens, ce qui n'est pas chose aisée avec de simples menus

- l'envie de rendre des "sous parties" de mon site accessibles sans avoir pour autant de cliquer et d'attendre le chargement d'une nouvelle page

Je pense que cette solution sera profitable pour la plupart des utilisateurs. Mais biensûr je ne compte pas délaisser les minorités.

J'ai étudié la solution proposée par Open Web. Au passage au dessus d'un lien, on affiche un menu div contenant lui-même d'autres liens. Personnellement, j'aurai une vingtaine de liens qui permettront chacun d'accéder à une quinzaine de liens en moyenne.

Le menu proposé par Open Web est accessible car les sous-menus (les div) sont par défaut, statiquement, affichés en dessous de chaque lien puis éventuellement, si le javascript est activé, dynamiquement repositionnés, uns par uns et ce de façon très propre, avec le DOM.

Trois problèmes avec cette solution :

1) Tous les sous menus apparaissent sur chaque page (soit près de 20ko pour ma part).

2) Le nombre important de sous-menus entrainent un freeze de 2s du navigateur (que ce soit sur Moz, Firefox, Konqueror ou même Opera). Pendant ce laps de temps, on voit tous les menus comme les verraient les gens ayant désactivé Javascript et il est impossible de naviguer sur la page.

3) Même pour les gens qui n'ont pas Javascript, un problème se pose : on se retrouve avec énormément de liens sous la forme d'une liste. Pas très pratique pour retrouver un lien dans ce menu ! (donc pas trèsaccessible !!)

Personnellement j'ai opté temporairement pour cette solution mais j'attends vos réactions :

1) Tous mes sous-menus (les div) sont placés dans un fichiers .js dans lequel je mets des "document.write" pour chaque div. Ce qui présente l'avantage de réduire la taille de chaque page et de cacher du côté navigateur le fichier .js.

2) Par défaut, tous les sous-menus sont invisibles. Et je place au bon endroit chaque menu uniquement quand j'en ai besoin, c'est à dire au passage de la souris sur le lien lié à ce sous-menu. Je n'ai donc plus une boucle for au chargement du javascript qui va redisposer chaque menu même si je n'en ai pas besoin dans l'immédiat !

3) Pour les personnes qui n'ont pas javascript, je place le contenu du sous-menu sur la page chargée après clic sur le lien (nécessite donc un clic), là où les gens ayant activé javascript ont ce sous-menu à disposition au passage de ce même lien.

Avec cette solution, l'affichage du menu est fluide.

Qu'en pensez-vous ? Une seule chose me chagrine : l'utilisation d'un fichier .js avec des document.write...

Modifié 2 Mai 2004 par Mathieu

[LaurentDenis]

Ce que tu décris ressemble plutôt à un plan/carte de site qu'à un menu de navigation !

Donc :

- simplifier le menu et s'en tenir aux items principaux, pour éliminer le javascript et les menus déroulants, toujours moins agréables à consulter qu'une page plate quand les items sont trop nombreux;

- laisser au plan de site son rôle de liste organisée de toutes les pages disponibles (utiliser une bonne hiérarchie de titres pour faciliter l'accessibilité)

[goetsu]

voilà les deux meilleurs menu niveau accessibilité:

ultimate dropdown menu

iubito menu