1178 sujets

Accessibilité du Web

Menu en cascade et javascript

Bonjour à tous,

Dans le cadre de l'accessibilité, je souhaite savoir s'il est possible de faire un menu en cascade. Pour qu'il soit opérationnel, il faut du javascript. Mais si je ne m'abuse, le code javascript pose problème en terme d'accessibilité.

Si le menu est en cascade, comment faire pour les touches tab?

Quelques conseils, orientations? Smiley biggrin
Ca dépend ce que tu entends par menu en cascade aussi.
Si tu évoques simplement un menu arborescent dont les branches et sous-branches peuvent être ouvertes et refermées par des clics successifs, il n'y a pas trop de problème. En tout cas avec IE et Jaws5, ça marche pas mal.

Par contre pour un menu géré via onmouseout/over, là, tu oublies tout de suite.
Bonsoir QuentinC,

a écrit :
Si tu évoques simplement un menu arborescent dont les branches et sous-branches peuvent être ouvertes et refermées par des clics successifs
tu as des liens à me recommander?

a écrit :
il n'y a pas trop de problème
Tu penses aussi pour les accesskey?

Merci de ta collaboration Smiley smile
a écrit :
propos des accesskey : dès le moment où un item est caché, son accesskey n'est plus utilisable.


C'est bon à savoir ca, merci pour l'info Smiley smile
Bonsoir à tous,

Merci pour vos remarques. Je regarde tout cela. Je laisse le post ouvert.... au cas où Smiley ohwell Smiley cligne
je viens de regarder le lien de goetsu: http://www.spip-contrib.net et j'ai cliqué par exemple sur le menu filtre dont voici le code:

<a href="-Filtres-mes-fonctions-"class='current'>Filtres&nbsp;: mes_fonctions</a></strong>
	<ul>
		<li><a href="-Pagination-">Pagination</a></li>
		<li><a href="-Mise-en-page-">Mise en page</a></li>
		<li><a href="-Dates-">Dates</a></li>
		<li><a href="-Liens-">Liens</a></li>
		<li><a href="-Images-">Images</a></li>
		<li><a href="-Typographie,118-">Typographie</a></li>
	</ul>


Mais il n'y a pas d'accesskey Smiley decu pour choisir le sous menu..... ou alors, j'aipas très bien compris Smiley confused
goetsu a écrit :
il suffit d'en ajouter mais personnellement je suis pas fan des accesskey


Dans ce cas là, comment un handicapé à mobilité réduite peut naviguer?

Merci de votre collaboration à tous Smiley smile
Salut tous,

@goetsu

Qu'est ce qui te gène dans les accesskey?

le mécanisme par lui même et la façon de s'en servir (manipulation de plusieurs touches).

Le fait que l'utilisateur n'ai pas le contrôle sur le choix de ces accesskey.
les personnes à mobilité réduite peuvent tout à fait utiliser le clavier pour naviguer sans pour autant avoir des accesskey.

Ce qui me gène, pas de liste reconnu officiellement au niveau international, la manipulation et pas le choix.

A mon sens, les accesskeys ne sont utiles qui si on propose à l'utilisateur une fonctionnalité pour personnalisé ces accesskeys
Bonsoir,

Je reviens à la charge avec les menus en cascade.

Pouvez-vous me dire si ce lien est conforme pour les non-voyants?
Il n'utilise pas de javascript, mais la technique hover. Pour plus d'informations, explications en anglais Smiley langue .

Voici la copie du code source css:
body {
		behavior:url("../htc/csshover.htc");
	}
	
	* {
		font-family:arial,tahoma,verdana,helvetica;
		font-size:12px;
	}

	/* the menu */

	ul,li,a {
		display:block;
		margin:0;
		padding:0;
		border:0;
	}

	ul {
		width:150px;
		border:1px solid #9d9da1;
		background:white;
		list-style:none;
	}

	li {
		position:relative;
		padding:1px;
		padding-left:26px;
		background:url("images/item_moz.gif") no-repeat;
		z-index:9;
	}
		li.folder	{ background:url("images/item_folder.gif") no-repeat; }		
		li.folder ul {
			position:absolute;
			left:120px; /* IE */
			top:5px;
		}		
			li.folder>ul { left:140px; } /* others */

	a {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		font-weight:bold;
		width:100%; /* IE */
	}
		li>a { width:auto; } /* others */

	li a.submenu {
		background:url("images/sub.gif") right no-repeat;
	}

	/* regular hovers */

	a:hover {
		border-color:gray;
		background-color:#bbb7c7;
		color:black;
	}
		li.folder a:hover {
			background-color:#bbb7c7;
		}
	
	/* hovers with specificity */
	
	li.folder:hover { z-index:10; }		
		
	ul ul, li:hover ul ul {
		display:none;
	}

	li:hover ul, li:hover li:hover ul {
		display:block;
	}


Merci à tous de votre collaboration Smiley cligne
@goetsu:
a écrit :
A mon sens, les accesskeys ne sont utiles qui si on propose à l'utilisateur une fonctionnalité pour personnalisé ces accesskeys


Justement, par rapport au code menu en cascade précédent, les accesskeys sont de rigueur Smiley langue , non? Mais comment les hierarchiser Smiley rolleyes

Merci de ta collaboration Smiley cligne
Salut Koss,

Je ne sais pas comment vas être organisé ce que tu veux faire, mais la liste des accesskey permettant une sécurité relative en ce qui concerne les interférences possible avec des raccourcis existants est assez restreinte.

a écrit :
Au final, le consensus, consacré en partie par l’usage, ne peut s’établir que sur 6 touches :

Touche 0 : liste des raccourcis
Touche 3 : carte du site
Touche 1 : page d’accueil
Touche 4 : formulaire de recherche
Touche 7 : contact email
Touche 9 : contact technique.
Avec, pour la touche 9 une très forte probabilité qu’elle soit de fait abandonnée au profit de la touche 7, dont l’efficacité sera amoindrie par tous ceux pour qui « contact email » est un « formulaire de contact », comme il est très commun de le voir, et non un lien direct vers la messagerie de l’utilisateur.


tiré du billet accesskey-le-grand-echec-de-laccessibilite-du-web
Bonjour knarf,

Merci de ta réponse.

ça ne fait pas beaucoup d'accesskeys.... compte tenu du précédent menu Smiley ohwell

Il faut donc que j'abandonne définitivement ce type de menus au profit d'un menu horizontal (accès avec tab) dans la colonne centrale (contenu) et sous-menus vertical dans la colonne de gauche avec accesskeys.

Comme d'habitude, je te remercie de tes conseils, sans oublier d'aller voir le lien que tu m'as donné Smiley cligne
Modifié par koss70 (09 Jul 2006 - 11:33)
Sujet clos
Aller à