La recette pour un menu déroulant accessible - partie 2 écouter le billet : La recette pour un menu déroulant accessible - partie 2 - mp3 - nouvelle fenêtre

samedi 22 juillet 2006 à 10:42 :: Accessibilité :: #35 :: rss

La voilà enfin cette partie 2, rassurez vous, les explications seront beaucoup moins longues que pour la partie 1.

Pour ceux qui n'aime pas lire voyez directement le résultat

But recherché

Je rappel qu'ici nous allons donner un confort supplémentaire dans l'utilisation de menu lors d'une navigation au clavier. Effectivement, celui ci fonctionne déjà lorsque l'on navigue de liens en liens via la touche de tabulation. Néanmoins, j'ai choisi de rajouter des liens, permettant de passer au menu de niveau 1 suivant, au début de chaque sous menu du niveau 1.

Certes, le menu parfait permettrait de se déplacer à l'aide des flèches gauche, droite, haut et bas. C'est faisable, certain le font même déjà mais je ne voulais pas tomber dans l'usine à gaz non plus.

Mise en place des éléments supplémentaires

Commençons par ajouter lors de l'initialisation de notre menu des éléments de liste supplémentaires qui contiendront nos liens "Aller au menu suivant". Afin de pouvoir les manipuler plus facilement ultérieurement, nos li supplémentaires auront la class "skipli" et nos lien la class "skiplink".

Ensuite nous allons ajouter des ancres juste avant chaque élément de niveau 1 du menu. Nous leur ajoutons un id et un name unique pour pouvoir pointer dessus, ainsi qu'une class "ciblea" pour les identifier plus facilement encore une fois.

(notez qu'ici le script a été reformaté pour tenir dans la mise en page du site)


var nMenu = document.getElementById("menu");
var l = 0;
var ancrea = 'ancrea';    
meschilds = leMenu[0].childNodes;
for(var h=0; h<meschilds.length;h++){
    if(meschilds[h].nodeType == 1){
    var l = l+1;
    subul = meschilds[h].childNodes[2];
    subul.insertBefore(domEl('li',
    [domEl('a','Aller au menu suivant',[['class','skiplink']])],
    [['class','skipli']]),subul.firstChild);
    meschilds[h].insertBefore(domEl('a','',
    [['name','skip'+l],['id','skip'+l],
    ['class','ciblea']]),meschilds[h].firstChild);           
    }
}

Mise en place des liens et de l'ancre pour sortir du menu

Ici nous récupérons tous les liens ayant la class skiplink défini précédemment puis nous leur ajoutons comme cible de lien l'élément de menu de niveau 1 qui les suit. Nous ajoutons également une ancre après le menu afin que le dernier lien permette de sortir du menu. Enfin, nous modifions le texte de notre dernier lien pour qu'il indique "Sortir du menu " et non plus "Aller au menu suivant".

var lesskip = getElementsByClassName('skiplink', 'a', nMenu);
for(var j=0;j<lesskip.length;j++){
lesskip[j].href = "#skip"+(j+2);
    if(j+1==lesskip.length){
	lasta = document.createElement("a");
    	lasta.id = "skip"+(j+2);
    	lasta.name = "skip"+(j+2);
        lasta.className= "ciblea";
	nMenu.appendChild(lasta);
        lesskip[j].firstChild.nodeValue="Sortir du menu";
    }
}

Rendre cela visible uniquement lors de la navigation au clavier

L'état normal de ces éléments de listes est d'être visible en permanence, hors ces liens n'ont aucune utilité lors d'une navigation à la souris, nous allons donc les afficher/masquer uniquement lors d'une utilisation au clavier.

Masquons les par défaut :

#header #menu li li.skipli{
	position: absolute !important;
	top:-500px !important;
}
 
#header a.ciblea {
	position:absolute;
	top:-500px;
}

Pour les faire reapparaître ou les masquer, il suffit alors de supprimer ou changer le nom de la class sur ces éléments lorsqu'ils reçoivent/perdent le focus.

function eventLstMontrerMenu(evt) {
...
...
else if(hasClassName(oNode,"skiplink")){
        oNode.parentNode.className = "skiplifocus";
}
 
function cacherMenus(oNode) {
...
...
var lessubskiplink = getElementsByClassName('skiplink','*', nMenu);
for (var k=0; lessubskiplink[k]; k++) {
	lessubskiplink[k].parentNode.className = "skipli";
}
 

Pour que le focus soit ramené au bon endroit dans IE nous avons également dut rajouter dans le code de la page

<!--[if IE]>
<style type="text/css" media="screen, projection">
#header a.ciblea {
	behavior:expression(this.href="#");
}
</style>
<![endif]-->

Conclusion

Le résultat de tout celà est visible en ligne ou téléchargeable.

J'ai essayé de répondre de mon mieux à cette problématique de menu déroulant et d'accessibilité. Néanmoins, cela ne garanti pas que ce menu passerait une labelisation Acccessiweb (Denis si tu me lis j'attends tes retours à ce sujet) mais il est tout de même à mon sens d'un niveau d'accessibilité satisfaisant.

Des pistes d'amélioration existent encore donc à vous de jouer. On peut par exemple générer des liens "Aller au menu xxxx" au lieu des "Aller au menu suivant" xxxx étant le nom de l'intitulé de niveau 1 suivant dans le menu car cela serait plus explicite. On peut également proposer un script php (ou autre langage) permettant de choisir la couleur de l'image mise en fond de menu pour gérer le cas des couleurs désactivé qui ici est forcée à blanc.

Enfin, il est possible que l'affichage connaisse certains bugs par exemple sur les anciennes versions d'IE mais cela n'est pas dut au script en lui même mais au mauvais support des CSS dans ces navigateurs ou à l'utilisation de dimensionnement relatif (par exemple sur konqueror les menus déroulant de 2ème niveau apparaissent décalés).

Trackbacks

Aucun trackback.

Les trackbacks pour ce billet sont fermés.

Commentaires

1. Le lundi 31 juillet 2006 à 23:45, par Enseignement

La css ne passe pas la validation ..
Sinon, ça a l'air d'être du très beau travail. Plus qu'à inclure les flèches du clavier :p

Réponse de aurélien levy le mercredi 2 août 2006 à 10:48

c'est corrigé, il signale juste des avertissements et l'erreur indiquée n'en ai pas une, inline-block existe bien en css 2.1

2. Le mardi 1 août 2006 à 11:42, par Chanson belge

Encore deux choses :

- il est déconseillé de mettre du javascript directement dans le code, autant l'externaliser.
- est-ce qu'il ne vaut mieux pas mettre directement dans la css un hack pour IE de type * html ou autre (valide) que des caractères conditionnels dans le core du code ?

Petite cerise sur le gâteau, il serait vraiment intéressant d'avoir en téléchargement le menu seul, sans le gabarit.

Bravo pour cette réalisation.

Réponse de aurélien levy le mercredi 2 août 2006 à 10:54

le window.onload du debut, il ne sert pas au script du menu mais au gabarit. L'appel de fonction en fin de code permet une mise en place plus rapide du script, on peut effectivement l'externaliser avec par exemple la fonction onload de dean edwards dont j'ai déjà parlé mais je trouve cela se compliquer la vie pour pas grand chose

3. Le mardi 1 août 2006 à 12:24, par Enseignement

Bon, tant que je suis aux commentaires sur ton travail ;)

Il est dommage qu'on ne puisse pas enlever le "désactiver le menu" sauf en allant bidouiller dans le javascript ... D'ailleurs comment le faire proprement ? Dans mon cas, ce lien est complètement superflu. Si je vois bien son intérêt, je trouve qu'il n'est pas entièrement nécessaire.
nMenu.insertBefore(domEl('p',[domEl('a','D�sactiver le
menu',[['href','javascript:menuController();']])],[['id','menuControle']]),nMenu.firstChild);

Je suppose que c'est là, mais ne suis pas sûr de ce que je peux enlever.
Il y a toujours le problème je trouve de placer trop de liens pour un utilisateur lambda. Là je trouve se pose la question de l'accessibilité intégrée. J'ai l'impression que ce genre de lien va perturber l'utilisateur qui comprend les menus déroulants, et là on est contre-productif à mon gout (ceci dit sans animosité aucune, au contraire).

Tu ne dis pas non plus si ton script peut être modifié, sous quelle licence tu le publies, etc.

Est-ce que le fait de désactiver le menu ne pourrait pas afficher le menu sans allonger le header ?

Penses-tu que le script est compatible avec la technique des portes coulissantes pour les liens principaux (ceux qui déclenchent les sous-menus) ?


A nouveau, félicitations pour cet excellent travail.

Réponse de aurélien levy le mercredi 2 août 2006 à 11:02

sans ce lien tu perd une part importante de l'accessibilité de ce menu puisque tes utilisateurs pourraient avoir des difficultés à l'utiliser et n'auront d'autre alternative que de désactiver javascript (ce que tout le monde ne sais pas faire)

Pour le supprimer il faut virer la ligne 175 dans initmenu :
nMenu.insertBefore(domEl('p',[domEl('a','Désactiver le menu', .....
puis les lignes 247,248,249 dans loadmenu et 286,287,288 de unloadmenu.

Pour la licence du script tout est indiqué dans le fichier .js et pour les parties que j'ai rajoutées, je me range sous celle d'Harmen à savoir Creative Commons - Attribution-ShareAlike 2.0

Pour les portes coulissantes en théorie oui mais il faudra modifier quelque peu le script surtout sur la partie 2

4. Le mardi 1 août 2006 à 13:24, par Chanteuse belge

Désolé pour les multiples posts, mais je viens de découvrir que si la font du body n'était pas à 100%, ça décalait le sous-sous menu et le rendait même assez difficilement atteignable à la souris.

par ailleurs, il faut signaler que le sous-menu vient un peu manger la taille du menu principal, au lieu de se mettre vraiment en dessous (suggestion d'amélioration)

Réponse de aurélien levy le mercredi 2 août 2006 à 11:03

c'est normal puisque tous est en relatif, si tu change le 100% du body il faudra que tu changes les valeurs de largeurs et de positionnement des éléments des menus

5. Le mardi 1 août 2006 à 14:40, par Jean-Luc Grellier

Salut,

Ben j'étais heureux de voir que tu avais sortie un menu : vraiment impressionnant !

par contre, impossible d el'utiliser avec spip... le code produit avec les balises est le même mais il laisse les menus dépliés, une idée ?

Réponse de aurélien levy le mercredi 2 août 2006 à 11:05

tu as un exemple visible quelquepart, c'est faisable, je l'ai déjà fait sur une version allégée du menu

6. Le mercredi 2 août 2006 à 09:41, par Chanson française

RE,

Je continue mes tests :)
Le résultat sous IE7 n'est pas génial à l'intérieur des menus (des espaces bleus).

Réponse de aurélien levy le mercredi 2 août 2006 à 11:07

bug CSS IE7, il suffit de trouver les hacks correspondant pour corriger cela mais dans l'immédiat je vais pas m'amuser à débugger sur un navigateur qui n'est pas encore sorti (si tu trouve hésite pas à donner le correctif)

7. Le mercredi 2 août 2006 à 11:17, par Chanson française

Au niveau accessibilité, il manque une balise alt sur l'image de background.
Où est disponible cette version allégée du menu ? Où une version en standalone, histoire de ne pas confondre menu et gabarit (l'exemple cité plus haut).
Merci pour tes réponses !
Marie-Noire


Réponse de aurélien levy le mercredi 2 août 2006 à 17:24

si tu parle de l'image de background mise dynamiquement en fond de menu si le alt y est

Quand je parlais de version allégée c'est juste une version sans le check du support des images et sans la partie 2

8. Le mercredi 2 août 2006 à 15:32, par Enseignement

Ce que je voulais dire par retirer le "désactiver le menu", c'était par exemple pour pouvoir le placer dans une page accessibilité, plutôt que de l'afficher comme ça au vu et su de tous :)
simplement. Merci de ta réponse.

9. Le mercredi 2 août 2006 à 19:18, par Enseignement

<img alt="" class="itemBackground" src="images/testImgActives.gif">


Oui désolé, il faut en effet mettre une balise alt vide .. Ca devient une déformation professionnelle de vouloir les remplir, mais en effet, c'est conseillé de les laisser vides. Sorry.

Où peut-on trouver une version allégée du script ?

Merci de tes réponses.

10. Le jeudi 3 août 2006 à 09:56, par Jean-Luc Grellier

Désolé je ne peux pas te montrer ce que cela donne, c'est en local... mais le symptôme est toujours le même,sous spip 1.9, le menu est déplié et le fait de cliquer sur activer/désactiver ne change rien.

merci

A+

Réponse de aurélien levy le mardi 8 août 2006 à 00:05

test avec la webdevelopper toolbar le debugger javascript doit te retourner une erreur, mais à mon avis c'est que le chemin d'accès ou l'image de fond des menus n'est pas bon ( imgLoaded.src = "images/testImgActives.gif?"+suffix; )

11. Le lundi 7 août 2006 à 22:54, par Fabrice

Il me semble qu'un lien sur la première partie serrait le bien venu. Cela éviterait de devoir la chercher par soi même et de risquer de rater pour toutes les finesses de votre travail collaboratif avec Christophe Harmen. Bon boulot, merci à vous deux ;-)

Réponse de aurélien levy le mardi 8 août 2006 à 00:02

merci de la remarque, c'est fait en tout début du billet

12. Le mardi 8 août 2006 à 18:43, par Bien mais ..

Une remarque tout de même :
le script est quasiment impossible à intégrer dans un autre site, pour tant qu'on veuille un tant soit peu mettre en forme les liens principaux.

Voilà plus d'une journée que j'essaie d'appliquer des background aux liens principaux, et c'est tout bonnement impossible. Merci de ton aide.

13. Le mardi 29 août 2006 à 11:45, par Sébastien D.

Bonjour,

Tout d'abord merci pour ce travail d'une grande qualité et utilité. Voilà un moment que je souhaitais tester ce menu, l'occasion vient de se présenter et je ne me suis pas fait prier.

Contrairement aux ennuis fait part dans le commentaire précédent, je n'ai pas eu de difficultés à intégrer ce menu au site que je suis en train de concevoir. Seul un mystère est resté sans réponse. J'observe un problème lorsque l'encodage utilisé pour les caractères est UTF-8. En effet, sous IE le menu reste constamment déroulé. Ceci se produit également sur l'exemple que tu proposes.

Je continue à pister l'origine (douteuse) du problème, si jamais je trouve une réponse, je ne manquerais pas d'en faire part à la suite de mon commentaire.

Bonne journée.

14. Le mardi 29 août 2006 à 12:07, par Sébastien D.

Il suffit d'en parler pour trouver le problème, il ne s'agissait en fait que d'un problème du côté de la feuille de style (moi qui cherchais désespérement dans le javascript).

Je n'avais pas remarqué certains caractères spéciaux qui n'avaient pas été correctement convertis en UTF-8 dans des commentaires. Du coup IE n'interprétait pas les styles ".withjavascript .submenu ul, ..." qui masquent le menu. Assez étonnant comme comportant puisque les caractères qui posaient problèmes étaient dans des commentaires...

Re-bonne journée.

15. Le jeudi 14 décembre 2006 à 16:14, par K

Bonjour,

J'ai trouvé une petite "erreur" ou dirais-je un imprévu.

Lorsqu'un élément du menu ne contient aucun sous-menu, par exemple "Contact", une erreur fatale arrête le script et donc le menu s'affiche déroulé.

En effet, la variable "subul" est null dans ce cas, donc lorsque JS cherche des childNodes ou encore essaie un insertBefore il retourne une erreur et s'arrête.

On peut facilement régler ce problème en ajouter un " if ( subul ) { subul.insertBefore [...] } " au alentour de la ligne 182 dans la fonction "initMenus()".


Sinon, excellent code.


K.

16. Le jeudi 4 janvier 2007 à 16:32, par TomTom

Bonjour,
Vraiment du très bon travail ce menu. Par contre, pour le bug IE7 (gros trait bleu après la 2ème sous-rubrique), quelqu'un connait-il les hacks appropriés ?... J'ai commencé à chercher, mais pas moyen de trouver !
D'avance merci.

Thomas

17. Le vendredi 5 janvier 2007 à 22:28, par bubux

salut ! super travail, mais j'ai remarqué une baisse de réactivité de ton menu à long terme: il suffit de refresher plusieurs fois la page pour constater ce problème...
Et pendant ce temps IE consomme trop de mémoire...

18. Le lundi 15 janvier 2007 à 14:58, par Benoît Nadaud

Je constate les mêmes problèmes sur un site auquel j'ai implémenté ce menu prometteur. Après plusieurs page visitées le menu ne se charge plus correctement ou la CSS ne se charge plus du tout.
A-t-on plus un correctif là dessus ?

Réponse de aurélien levy le lundi 15 janvier 2007 à 15:45

Je vais essayer de regarder mais à mon avis c'est un problème de memory leak de IE, sans doute lié à la gestion d'événement.

Il faut peut être rajouter un onunload pour nettoyer la mémoire ou revoir quelque peu le code

19. Le vendredi 19 janvier 2007 à 16:21, par Benoit Nadaud

Merci Aurélien, comme dans de nombreuses situation MSIE fait des siennes... ce qui est malheureux c'est qu'il faille faire avec.

20. Le lundi 19 mars 2007 à 04:53, par robert

hi all. nice blog. its very ineresting article.

21. Le jeudi 12 avril 2007 à 17:40, par Mikiman

Article très intéressant, le résultat est très bien.

Merci pour ce guide
Cordialement,
Mikiman

22. Le lundi 16 juillet 2007 à 10:56, par tobefred

Superbe solution.
Il manque cependant une chose qui me semble indispensable : un indicateur de la présence d'un sous-menu (flèche par exemple).
Existe-t-il une version incluant cette fonctionnalité ?
Sinon, est-ce facile d'enrichir le code pour la mettre en oeuvre ?

23. Le lundi 7 juillet 2008 à 04:30, par metronome

Vraiment très intéressant comme résultat. Je ne pense pas que ce soit très dur de l'améliorer pour prendre en compte les flèches.
Par contre en terme d'accessibilité je me pose des questions sur l'usage du javascript...

24. Le mercredi 1 octobre 2008 à 22:41, par Rigoberto

Remarquablement! C'est l'information réellement admirable. Merci pour les instructions précieuses. J'espère que vous continuez à écrire aussi d'une manière intéressante.

25. Le samedi 4 octobre 2008 à 16:47, par Josue

Merci pour votre article. Je m'irteresse beaucoup a ce sujet. Je pense que cette information peut etre utile pour moi. Si vous avez encore queque chose, ecrivez-vous.

26. Le jeudi 9 octobre 2008 à 20:29, par Toe Nail Fungus Review

Vous avez inventé très intéressant article. J'espère beaucoup que vous continuez à écrire pour ce sujet, j'attendrai de nouveaux messages.

27. Le mardi 14 octobre 2008 à 20:57, par Breast Actives Web Site

Ce que je peux dire pour le moment, tu as fait un bon travail, on peut dire un tel bon experience dans tous les cote. T'as pris combien de temps. Encore quelque chose de menu?

28. Le mardi 25 novembre 2008 à 21:59, par Gcyrillus

Bonjour,
Je viens de découvrir ce menu sur la liste de accestech , excellent .et puis d'autres moins bien finis .
Je crois l'apprecier à sa juste valeur , car j'avais fait des tests il y a un moment , sur un seul niveau au résultat plutôt deroutant car sans js , (exepté le rollover pour IE6 et inf ) seul le lien en tabulation apparait au dessus de nulle-part , j'avais alors eu confirmation que cela etait possible et que je n'avais pas de competences en javascript :) ).

Si j'intervient , c'est plutot pour ce bug dans Safari , a l'instar de IE avec le positionement relatif , il est possible de provoqué un "simili reflow" a l'affichage avec la pseudo class :after
Généralement j'use de cet technique pour Opera , Attention , effets secondaires parfois au rendez-vous ! il est alors preferable de laisser coulé.

Pour Safari , la regle css pour ce menu , qui permettrai de dimensionné les li de premier niveau a leur juste dimension sans devoir les survoler serait :

#menu li:after{
content:'';
}

Je me suis permis de faire une copie "corrigée" avec cette seule regle en plus à cette endroit pour test :
gcyrillus.free.fr/000pers...
(moderation et demande de retrait de cette copie par mail , à votre convenance)

GC

29. Le mardi 25 novembre 2008 à 22:10, par Gcyrillus

Zut ,
j'oubliai IE 7 pour l'espacement entre les li déroulées :
li a {zoom:1;}
Juste une histoire de : To have "layout" or to be not ....

Réponse de aurélien levy le mardi 25 novembre 2008 à 23:58

Correctifs safari et ie7 intégrés, merci

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

Calendrier

« juillet 2006 »
lunmarmerjeuvensamdim
12
3456789
10111213141516
17181920212223
24252627282930
31

Catégories

Sondage

Lequel des ces tutoriaux préféreriez vous voir traiter en priorité ?

Syndication

Archives

Il y a 105 billets publies sur ce blog, alors n'hésitez pas à fouiner

Liens